import {
    AI,
    AGI,
    LLM,
    MINI_PROGRAM,
    BROWSER_EXTENSION,
    H5,
    PLUGIN,
    ALGORITHMS,
    ANGULAR,
    ANIMATION,
    BROWSER_APIS,
    BUILD_TOOLS,
    CANVAS,
    CI_CD,
    CODE_QUALITY,
    CROSS_PLATFORM,
    CSS,
    DATA_STRUCTURES,
    DESIGN_PATTERNS,
    DEVOPS,
    DOCKER,
    EXPRESS,
    FRAMEWORKS,
    GIT,
    GRAPHQL,
    HTML,
    HTTP,
    JAVASCRIPT,
    LESS,
    MOBILE_DEVELOPMENT,
    NEXTJS,
    NODEJS,
    NUXTJS,
    PERFORMANCE,
    PROGRESSIVE_WEB_APPS,
    REACT,
    REDUX,
    RESPONSIVE_DESIGN,
    REST_API,
    SASS,
    SECURITY,
    SEO,
    STATE_MANAGEMENT,
    SVG,
    TESTING,
    TYPESCRIPT,
    UI_UX,
    VERSION_CONTROL,
    VITE,
    VUE,
    VUEX,
    WEBGL,
    WEBPACK,
    WEBSOCKETS,
    WEB_COMPONENTS,
} from '@/constants';

export default [
    {
        "id": "c02dc2cd-17b4-4d26-a59b-00d27e8697c2",
        "url": "",
        "slug": "nodejs_native_features_replace_15_npm_packages",
        "createdAt": 1762887470544,
        "title": "Node.js 原生功能狂飙，15 个热门 npm 包要失业了",
        "description": "Node.js 18+ 内置的 15 组能力——原生测试、fetch、WebStreams、watch、glob、parseArgs、dotenv、uuid、base64、压缩、加密、诊断报告、worker、sqlite、http2 服务器推送——可直接替代常用 npm 包，覆盖构建、调试、部署全链路，示例代码演示零依赖迁移，性能提升 20-50%，包体积与供应链风险同步下降，帮助团队锁定 LTS 长期维护方案。",
        "tags": [NODEJS, JAVASCRIPT, PERFORMANCE],
        "content": "/blogs/2025/Node.js 原生功能狂飙，15 个热门 npm 包要失业了.md"
    },
    {
        "id": "1a58f751-58a6-4f4a-b29a-38a172224b99",
        "url": "",
        "slug": "twitter_cards_tutorial_frontend",
        "createdAt": 1762714670220,
        "title": "Twitter 分享链接也能这么玩？一篇文章教你搞定 Twitter 卡片",
        "description": "详解Twitter Card标签（summary、summary_large_image、player、app）的meta写法与调试流程，覆盖图片尺寸、HTTPS白名单、缓存刷新等踩坑点，提供React/Vue/Next.js多框架代码模板，一键生成带预览图、描述、来源标识的分享链接，让网页在Twitter时间线里即刻呈现富媒体卡片，提升CTR与品牌曝光。",
        "tags": [HTML, JAVASCRIPT, SEO],
        "content": "/blogs/2025/Twitter 分享链接也能这么玩？一篇文章教你搞定 Twitter 卡片.md"
    },
    {
        "id": "cac09965-b6eb-4192-a80a-bd1dd5c21fb3",
        "url": "",
        "slug": "solving_own_problem_earned_1_2m_usd",
        "createdAt": 1762624904305,
        "title": "靠解决自己的问题 赚了120万美元",
        "description": "作者用纯前端技术栈自研 Notion 类协作工具解决个人知识管理痛点，React + Next.js SSR 架构配合 PostgreSQL 行级安全与实时 WebSocket 同步，实现毫秒级多人协同；开源后通过一次性买断与插件市场双模式变现，120 万美元收入完整拆解定价、支付、国际化、性能监控与 SEO 自动化部署，提供可复制的独立开发盈利路径。",
        "tags": ['独立开发者', '开发者', '独立开发'],
        "content": "/blogs/2025/靠解决自己的问题 赚了120万美元.md"
    },
    {
        "id": "e5642394-ccab-45e2-a3cb-ca71998e1714",
        "url": "",
        "slug": "learn_marketing_ads_30min_10k_usd",
        "createdAt": 1762452104781,
        "title": "看广告学营销，30分钟赚了1万美元",
        "description": "拆解一次真实广告套利案例：用Chrome DevTools抓包分析SSP竞价接口，Node.js脚本自动切换高eCPM广告位，配合WebView预加载与缓存策略，30分钟实现1万美元ARPU。涵盖OpenRTB 2.5协议字段、频次控制算法及A/B实验灰度发布，提供完整代码与Grafana监控模板，可快速复现并迭代收益模型。",
        "tags": ['独立开发者', '开发者', '独立开发'],
        "content": "/blogs/2025/看广告学营销，30分钟赚了1万美元.md"
    },
    {
        "id": "74470e41-2e72-4c2d-80b6-c18341952111",
        "url": "",
        "slug": "free_tools_customer_acquisition_marketing",
        "createdAt": 1762279304879,
        "title": "如何通过免费工具营销获取客户？",
        "description": "梳理零预算获客的技术栈：Google Search Console、Ahrefs Webmaster、Screaming Frog、GitHub Pages、Mailchimp Free、Hotjar Basic 与自动化脚本组合，演示 SEO 关键词矩阵、落地页性能优化、内容再利用、A/B 测试与数据漏斗搭建流程，附可复制的 GitHub Actions 定时任务与 Analytics 事件追踪代码，帮助独立开发者及小团队在一周内搭建可持续的免费获客引擎并量化转化。",
        "tags": ['独立开发者', '开发者', '独立开发'],
        "content": "/blogs/2025/如何通过免费工具营销获取客户？.md"
    },
    {
        "id": "bd2cf067-794f-4443-ac45-b09d17cca3dc",
        "url": "",
        "slug": "get_your_first_client_frontend",
        "createdAt": 1762106504545,
        "title": "如何获得你的第一个客户？",
        "description": "从冷启动到签约：用Next.js+Tailwind快速搭站、SEO关键词矩阵、GitHub作品墙、LinkedIn自动化脚本，四周内拿到首个付费客户，附报价模板与合同避坑清单。",
        "tags": ['独立开发者', '开发者', '独立开发'],
        "content": "/blogs/2025/如何获得你的第一个客户？.md"
    },
    {
        "id": "af353b03-383c-45f9-889b-b1bfebbaa0a8",
        "url": "",
        "slug": "why_no_one_cares_about_your_product",
        "createdAt": 1761847304975,
        "title": "为什么没人关注你的产品",
        "description": "从性能指标、可访问性、SEO、PWA四个维度拆解前端产品无人关注的根因，给出 Lighthouse、WebPageTest 量化定位方法，结合 React/Vue 骨架屏、SSR、资源预加载、Service Worker 离线缓存等落地优化，附真实案例对比数据，读完可建立系统化的体验诊断与提速方案，让首屏时间、FCP、LCP 立即下降 30%+。",
        "tags": ['独立开发者', '开发者', '独立开发'],
        "content": "/blogs/2025/为什么没人关注你的产品.md"
    },
    {
        "id": "105e2f02-0e1d-405a-a10a-26dc635f37d9",
        "url": "",
        "slug": "landing_page_tips_double_conversion",
        "createdAt": 1761674504614,
        "title": "landing_page这样写，转化率直接翻倍",
        "description": "基于A/B测试与行为数据，拆解高转化落地页结构：F型视觉动线、LCP<2.5s性能预算、CLS<0.1骨架屏、色彩对比4.5:1、微交互延迟<100ms，给出React+Next.js代码模板与GA4事件埋点方案，可直接复用并量化验证提升率。",
        "tags": [HTML, CSS, JAVASCRIPT, PERFORMANCE, UI_UX],
        "content": "/blogs/2025/landing_page这样写，转化率直接翻倍.md"
    },
    {
        "id": "b5724e19-39b7-4f7c-82d4-ee71193948f3",
        "url": "",
        "slug": "3_simple_ways_to_promote_your_product",
        "createdAt": 1761501704655,
        "title": "3 种简单的方法来推广你的产品",
        "description": "围绕前端产品冷启动场景，详解SEO结构化数据、Web Share API与PWA离线推送三种零成本推广方案，给出Next.js自动生成sitemap、调用navigator.share实现一键社媒扩散、Service Worker结合VAPID密钥完成订阅通知的完整代码与指标埋点示例，可直接嵌入现有项目提升自然流量与回访率。",
        "tags": ['独立开发者', '开发者', '独立开发'],
        "content": "/blogs/2025/3 种简单的方法来推广你的产品.md"
    },
    {
        "id": "a683c55c-1aea-4216-b211-5e2d685c2a83",
        "url": "",
        "slug": "safari_ios_version_detection_2025",
        "createdAt": 1761178460746,
        "title": "2025年 Safari 和 iOS版本检测新思路",
        "description": "基于 User-Agent 字符串不可靠的现状，利用 CSS @supports、WebGL 扩展、JS 全局属性差分等特征矩阵，在运行时精准识别 2025 版 Safari 与 iOS 系统版本；提供可插拔检测函数、降级策略与缓存机制，解决旧库失效、WKWebView 伪装等问题，实现一套无依赖、可单元测试、秒级返回的版本判定方案，直接投入灰度发布、兼容脚本与性能实验场景。",
        "tags": [JAVASCRIPT, BROWSER_APIS, MOBILE_DEVELOPMENT],
        "content": "/blogs/2025/2025年 Safari 和 iOS版本检测新思路.md"
    },
    {
        "id": "76697da2-bf6a-437d-be42-997306f0693d",
        "url": "",
        "slug": "browser_search_highlight_api_revealed",
        "createdAt": 1760919260141,
        "title": "浏览器的搜索高亮是怎么做的？这个 API 揭秘了",
        "description": "通过Highlight API在浏览器端实现零依赖的文本搜索高亮，解析Range对象与DOM分割细节，演示动态生成高亮标签、滚动定位与性能优化技巧，提供可复用的前端搜索组件方案。",
        "tags": [JAVASCRIPT, BROWSER_APIS],
        "content": "/blogs/2025/浏览器的搜索高亮是怎么做的？这个 API 揭秘了.md"
    },
    {
        "id": "5ddb4db6-7931-448f-9e1e-17be5dc7a92f",
        "url": "",
        "slug": "claude_code_plugin_system_arrives",
        "createdAt": 1760782770908,
        "title": "Claude Code 插件系统来了",
        "description": "Claude Code 插件系统基于 Manifest V3 设计，支持 TypeScript 声明、沙箱隔离与生命周期钩子，可在 IDE 内无缝接入自定义命令、代码补全、静态检查与一键重构。示例演示如何注册 background、sidebar、editor 三类插件，利用 RPC 与 Claude 模型交互，实现智能提示、批量生成单测、依赖漏洞扫描及文档同步。阅读后可快速搭建私有插件，掌握权限配置、热重载、日志追踪与持续集成要点，将团队编码规范与自动化流程直接嵌入日常开发链路。",
        "tags": ['独立开发者', '开发者', '独立开发'],
        "content": "/blogs/2025/Claude Code 插件系统来了.md"
    },
    {
        "id": "6ad06a60-4051-4892-b8ec-29da927bb76c",
        "url": "",
        "slug": "timezone_calculation_lightweight_javascript_date_library",
        "createdAt": 1760573660379,
        "title": "时区计算太头疼？这个轻量级JavaScript库让日期处理变简单了",
        "description": "基于Day.js的轻量级时区库，支持IANA时区名、UTC偏移量与本地时间互转，提供链式API完成夏令时判断、跨时区日程计算，打包体积极小，可无痛替换moment-timezone，示例覆盖全球会议排期、倒计时、日志时间统一等场景，快速解决国际化项目中的时区错乱问题。",
        "tags": [JAVASCRIPT],
        "content": "/blogs/2025/时区计算太头疼？这个轻量级JavaScript库让日期处理变简单了.md"
    },
    {
        "id": "37795607-9dad-4ec3-a47a-711165872dd9",
        "url": "",
        "slug": "2025_css_new_features_roundup",
        "createdAt": 1760314460166,
        "title": "2025年CSS新特性大盘点",
        "description": "梳理2025年CSS新特性：@when/@else条件级联、锚点定位、@layer作用域、color-mix与相对色彩、子网格、滚动驱动动画、@property注册变量，结合响应式组件、主题切换、性能优化实例，提供可落地的代码片段与浏览器兼容策略，快速掌握未来样式开发范式。",
        "tags": [CSS],
        "content": "/blogs/2025/2025年CSS新特性大盘点.md"
    },
    {
        "id": "a1e53506-00f1-4847-adde-f3f3bf669321",
        "url": "",
        "slug": "react_19_2_new_features_update",
        "createdAt": 1759968860340,
        "title": "React 19.2 重磅更新！这几个新特性终于来了",
        "description": "React 19.2 带来原生 use()、useFormStatus、useOptimistic 三大 Hook，支持服务端组件流式渲染与自动批处理，可零配置实现渐进式水合、客户端缓存回退与并行渲染，配合全新 Compiler 静态优化，组件首次渲染性能提升 30%，表单瞬时响应，帮助团队低成本升级并落地高性能同构应用。",
        "tags": [JAVASCRIPT, REACT],
        "content": "/blogs/2025/React 19.2 重磅更新！这几个新特性终于来了.md"
    },
    {
        "id": "ecfd5946-2c4d-4ff6-af61-004725c37aed",
        "url": "",
        "slug": "claude_sonnet_45_updates_overview",
        "createdAt": 1759191260819,
        "title": "最新！一文速览 Claude Sonnet 4.5 所有更新点",
        "description": "Claude Sonnet 4.5 升级要点全览：200K 上下文窗口、函数调用准确率提升 40%、新增 JSON Mode 与视觉 token 经济方案，实测对比 4.0 在代码生成、多轮工具链、前端组件还原上的延迟与成本差异，附可直接套用的 prompt 模板与定价策略，帮助快速评估是否值得迁移。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/最新！一文速览 Claude Sonnet 4.5 所有更新点.md"
    },
    {
        "id": "2745d1d9-b0d8-43d5-afe9-fb1af9b492ce",
        "url": "",
        "slug": "microsoft_markitdown_convert_docs_to_markdown",
        "createdAt": 1759018460753,
        "title": "微软MarkItDown神器：一行命令将任何文档转换为Markdown！",
        "description": "微软开源MarkItDown，一行命令把PDF、Word、PPT、Excel、HTML、邮件、图片OCR等批量转成干净Markdown；支持Python库与CLI，保留标题、列表、表格、链接、图片，可插自定义插件，轻松打通LLM语料、静态站点、知识库自动化流程，附性能调优与GitHub Action实战。",
        "tags": [PLUGIN],
        "content": "/blogs/2025/微软MarkItDown神器：一行命令将任何文档转换为Markdown！.md"
    },
    {
        "id": "11f4a6a5-e1e0-4eb6-85ce-9761afcd68d8",
        "url": "",
        "slug": "altman_ai_development_stages",
        "createdAt": 1758770118796,
        "title": "回顾 Altman 提出的 AI 发展的五大阶段",
        "description": "解析Sam Altman提出的AI发展五大阶段理论，涵盖从基础自动化到通用人工智能的技术演进路径，结合当前AI在前端领域的应用场景如智能代码生成、自动化测试和用户体验优化，帮助开发者理解AI技术发展趋势并提前规划技术学习路线，掌握未来人机协作开发模式的关键技能。",
        "tags": [AI, LLM, AGI],
        "content": "/blogs/2025/回顾 Altman 提出的 AI 发展的五大阶段.md"
    },
    {
        "id": "5bf8a121-e29e-4638-8bd4-b526e2c606f0",
        "url": "",
        "slug": "highly_recommended_library_simplifies_twitter_api_calls",
        "createdAt": 1758510918779,
        "title": "强烈推荐！这个库让 Twitter API 调用变得超简单",
        "description": "介绍一个简化Twitter API调用的JavaScript库，通过封装OAuth认证和REST API调用流程，提供简洁的链式调用接口。涵盖推文发送、用户信息获取和数据分析等常见场景，包含错误处理和速率限制的最佳实践方案。开发者可快速集成Twitter功能到Web应用，减少底层API复杂性。",
        "tags": [JAVASCRIPT, REST_API, BROWSER_APIS, HTTP],
        "content": "/blogs/2025/强烈推荐！这个库让 Twitter API 调用变得超简单.md"
    },
    {
        "id": "3b245aff-c0c7-4bb4-8a0c-3294d4aa4a21",
        "url": "",
        "slug": "nano_banana_prompt_library_recommendation",
        "createdAt": 1758165318534,
        "title": "强烈推荐这个 Nano-banana 提示词库，玩法超多",
        "description": "Nano-banana提示词库是一个专为AI交互设计的高效工具集，提供丰富的预设模板和自定义功能，支持多种应用场景如自然语言处理、自动化脚本生成和智能对话设计。通过集成API调用和本地化部署方案，开发者可以快速构建智能应用并提升交互体验，掌握提示工程的核心技巧与实际应用方法。",
        "tags": [AI, LLM, JAVASCRIPT, FRAMEWORKS, PLUGIN],
        "content": "/blogs/2025/强烈推荐这个 Nano-banana 提示词库，玩法超多.md"
    },
    // {
    //     "id": "f4e2b8e1-3f3a-9999-8e2e-1c3b6f5e9a1d",
    //     "url": "",
    //     "slug": "markdown_syntax_guide",
    //     "createdAt": 1758012063396,
    //     "title": "Markdown语法大全测试文件",
    //     "description": "这是一个前端技术博客，分享最新的前端技术、工具和最佳实践，涵盖JavaScript、React、Vue等热门框架，以及性能优化、安全性和用户体验等方面的内容，帮助开发者提升技能和解决实际问题。",
    //     "tags": [JAVASCRIPT, FRAMEWORKS, BUILD_TOOLS, CODE_QUALITY, DESIGN_PATTERNS],
    //     "content": "/blogs/2025/Markdown语法大全测试文件.md"
    // },
    {
        "id": "8c0058c9-c418-42ea-988f-d6812bbac9bc",
        "url": "",
        "slug": "nodejs_file_upload_multer_vs_formidable_performance",
        "createdAt": 1757839263127,
        "title": "Node.js 文件上传终极对比：Multer vs Formidable，性能差距竟达 3 倍！",
        "description": "对比Multer与Formidable在Node.js文件上传场景中的性能表现，解析两者在处理大文件、多文件并发时的吞吐量差异。通过基准测试数据展示3倍性能差距的具体成因，包括内存管理机制、流处理方式和错误处理策略。提供实际项目中的选型建议和优化方案，帮助开发者根据业务需求选择最适合的文件上传解决方案。",
        "tags": [NODEJS, PERFORMANCE, HTTP, BUILD_TOOLS, FRAMEWORKS],
        "content": "/blogs/2025/Node.js 文件上传终极对比：Multer vs Formidable，性能差距竟达 3 倍！.md"
    },
    {
        "id": "20126838-b912-49a9-b330-ae50759808a9",
        "url": "",
        "slug": "deeplearning_andrew_ng_claude_code_notes",
        "createdAt": 1757666463119,
        "title": "Deeplearning 吴恩达 Claude Code 课程笔记",
        "description": "吴恩达深度学习课程与Claude编程实践相结合的学习笔记，涵盖神经网络基础、卷积网络、循环网络等核心概念，通过Python代码实现图像识别、自然语言处理等实际应用场景。包含梯度下降、反向传播等关键算法的代码解析，帮助开发者理解深度学习原理并掌握实战编程技巧，提升机器学习项目的开发能力。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/Deeplearning 吴恩达 Claude Code 课程笔记.md"
    },
    {
        "id": "c0c4afd4-fe00-4301-9f11-b11455690529",
        "url": "",
        "slug": "agents_md_ai_programming_best_practices",
        "createdAt": 1757493663380,
        "title": "AGENTS.md：AI 编程最佳实践的新标准",
        "description": "AGENTS.md 定义了 AI 编程中的协作规范与开发流程，涵盖智能体架构设计、上下文管理及工具调用等关键技术，通过标准化实践提升 AI 代理的可靠性和可维护性，帮助开发团队构建高效、可扩展的 AI 驱动应用，适用于自动化任务、代码生成与智能决策等场景。",
        "tags": [AI, CODE_QUALITY, DESIGN_PATTERNS, JAVASCRIPT, TYPESCRIPT],
        "content": "/blogs/2025/AGENTS.md：AI 编程最佳实践的新标准.md"
    },
    {
        "id": "e0d4bba8-4514-436e-a0e5-4b36facc6265",
        "url": "",
        "slug": "vercel_ai_gateway_hundreds_models_zero_threshold",
        "createdAt": 1757320863627,
        "title": "Vercel 发布 AI Gateway 神器！可一键访问数百个模型，助力零门槛开发 AI 应用",
        "description": "Vercel AI Gateway提供统一的API接口，支持一键接入OpenAI、Anthropic等数百个AI模型，简化了多模型调用和请求管理流程。开发者可通过标准化端点实现模型切换、成本控制和性能监控，大幅降低AI应用开发复杂度。掌握AI Gateway的集成方法能够快速构建可扩展的智能应用，提升开发效率并优化资源利用率。",
        "tags": [AI, NEXTJS, NODEJS, BUILD_TOOLS, FRAMEWORKS],
        "content": "/blogs/2025/Vercel 发布 AI Gateway 神器！可一键访问数百个模型，助力零门槛开发 AI 应用.md"
    },
    {
        "id": "88716d3e-0885-4f7e-bb4b-1be584bfc8cd",
        "url": "",
        "slug": "dotenv_environment_variables_3_minutes",
        "createdAt": 1757061663400,
        "title": "环境变量配置神器！3 分钟学会 dotenv ~",
        "description": "dotenv是一个轻量级的环境变量管理工具，通过创建.env文件集中管理配置信息，避免敏感数据硬编码在代码中。适用于前端及Node.js项目开发，支持不同环境（开发、测试、生产）的变量隔离。学习如何使用dotenv加载和读取环境变量，结合process.env实现配置的动态切换，提升项目的安全性和可维护性。",
        "tags": [NODEJS, BUILD_TOOLS, JAVASCRIPT],
        "content": "/blogs/2025/环境变量配置神器！3 分钟学会 dotenv ~.md"
    },
    {
        "id": "d2c8ddad-690c-4144-a22e-6afd30b2a0c2",
        "url": "",
        "slug": "modern_unix_command_line_tools_guide",
        "createdAt": 1756888863602,
        "title": "现代Unix命令行工具革命：30个必备替代品完整指南",
        "description": "探索现代Unix命令行工具的革新替代方案，包括fd、ripgrep、exa、bat等30个高效工具的核心功能与安装配置方法，通过具体命令示例展示其在文件搜索、文本处理、系统监控等日常开发场景中的实际应用，帮助开发者提升终端工作效率并优化命令行工作流。",
        "tags": [NODEJS, BUILD_TOOLS, DEVOPS, CODE_QUALITY, GIT],
        "content": "/blogs/2025/现代Unix命令行工具革命：30个必备替代品完整指南.md"
    },
    {
        "id": "998ae43c-3ced-4338-bd81-ba5bbd4134db",
        "url": "",
        "slug": "anthropic_claude_model_intelligence_decline",
        "createdAt": 1756629663433,
        "title": "最新！Anthropic 官方承认 Claude 模型“降智”",
        "description": "Anthropic官方确认Claude模型性能下降现象，分析模型退化原因及对开发者的影响。探讨API调用中的性能监控方法与应对策略，提供模型输出质量评估的技术方案和优化建议，帮助开发者调整提示工程与集成方案以维持应用稳定性。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/最新！Anthropic 官方承认 Claude 模型“降智”.md"
    },
    {
        "id": "6f8bc6e6-8cff-41d9-b15e-8fe1c58ea6bc",
        "url": "",
        "slug": "one_config_claude_code_multi_model_switching",
        "createdAt": 1756474692839,
        "title": "一个配置文件搞定！Claude Code 多模型智能切换",
        "description": "Claude Code多模型智能切换功能通过单一配置文件实现AI模型的动态选择与切换，支持GPT-4、Claude-3等主流模型的无缝衔接。结合环境变量与条件判断逻辑，开发者可根据任务复杂度、成本控制和性能需求自动匹配最优模型。该方案显著提升开发效率，降低API调用成本，并提供完整的配置示例与调试技巧。",
        "tags": [AI, LLM, BUILD_TOOLS, CODE_QUALITY],
        "content": "/blogs/2025/一个配置文件搞定！Claude Code 多模型智能切换.md"
    },
    {
        "id": "0744fef1-29fd-4878-ad72-6b0f342543e2",
        "url": "",
        "slug": "claude_code_config_guide_one_line_command",
        "createdAt": 1756301892310,
        "title": "Claude Code 终极配置指南：一行命令搞定各种配置",
        "description": "Claude Code配置工具的核心功能与使用方法，通过命令行快速配置开发环境、编辑器设置和项目模板，涵盖VS Code扩展安装、Git配置和环境变量设置等常见场景，使用一行命令即可完成多环境配置同步，提升开发效率并保持团队配置一致性。",
        "tags": [BUILD_TOOLS, CODE_QUALITY, DEVOPS, VERSION_CONTROL, NODEJS],
        "content": "/blogs/2025/Claude Code 终极配置指南：一行命令搞定各种配置.md"
    },
    {
        "id": "08a5ef86-c507-4b57-babf-65eb792a50a9",
        "url": "",
        "slug": "claude_code_config_guide_tools",
        "createdAt": 1756129092570,
        "title": "Claude Code 从入门到精通：最全配置指南和工具推荐",
        "description": "全面解析Claude Code的配置流程和开发环境搭建，涵盖编辑器集成、调试配置和自定义规则设置，提供实用的代码片段和插件推荐，帮助开发者快速掌握Claude Code的高级功能并提升开发效率。",
        "tags": [BUILD_TOOLS, CODE_QUALITY, JAVASCRIPT, TYPESCRIPT, WEBPACK],
        "content": "/blogs/2025/Claude Code 从入门到精通：最全配置指南和工具推荐.md"
    },
    {
        "id": "b97b6d4f-ad41-4d66-8767-5ad3477db7f8",
        "url": "",
        "slug": "github_9k_star_self_hosted_cloud_vs_aws",
        "createdAt": 1755841495759,
        "title": "GitHub 9.6K Star！自建云服务，玩爆 AWS",
        "description": "探索如何利用GitHub上9.6K星标的开源项目构建私有云服务，详细解析从基础设施搭建到服务部署的全流程，对比AWS等商业云服务的成本与性能优势，提供容器化部署、负载均衡配置等实战技巧，帮助开发者掌握企业级云架构的自主搭建能力，实现高性价比的云端解决方案。",
        "tags": [GIT, NODEJS, DEVOPS],
        "content": "/blogs/2025/GitHub 9.6K Star！自建云服务，玩爆 AWS.md"
    },
    {
        "id": "c9ea3428-afd9-41d0-96ba-385b9857c1ba",
        "url": "",
        "slug": "mcp_founder_interview_ai_innovation",
        "createdAt": 1755668695413,
        "title": "MCP协议创始人深度访谈：AI应用的下一波创新浪潮",
        "description": "MCP协议创始人分享AI应用前沿趋势，解析协议底层架构与核心算法实现，探讨协议在智能推荐、自动化决策等场景的应用实践，揭示AI领域即将到来的技术突破点，为开发者提供下一代AI应用开发的创新思路与实现路径。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/MCP协议创始人深度访谈：AI应用的下一波创新浪潮.md"
    },
    {
        "id": "e7b75860-7d01-4c6d-8f92-0bfa37208589",
        "url": "",
        "slug": "image_transition_effect_implementation",
        "createdAt": 1755495895547,
        "title": "求大佬指点！这个图片切换效果怎么实现？",
        "description": "解析图片切换效果的多种实现方案，包括CSS动画、JavaScript轮播以及第三方库应用，详细讲解transition、transform等核心属性的使用技巧，通过代码示例展示平滑过渡、自动播放等常见交互效果的实现方式，帮助开发者快速掌握前端视觉动效开发的关键技术。",
        "tags": [JAVASCRIPT, CSS, ANIMATION],
        "content": "/blogs/2025/求大佬指点！这个图片切换效果怎么实现？.md"
    },
    {
        "id": "cdf307e5-ddd5-45f5-9552-2b22c2d96dbd",
        "url": "",
        "slug": "giffgaff_card",
        "createdAt": 1755409495749,
        "title": "giffgaff 卡相关注意事项、技巧",
        "description": "GiffGaff卡是一种预付费SIM卡解决方案，详细介绍其API集成方法和前端实现技术，包括用户认证、余额查询和套餐管理等功能的Web界面开发，通过React/Vue组件示例展示如何构建响应式管理后台，帮助开发者快速实现电信业务相关的Web应用开发。",
        "tags": ["giffgaff", "短信", "卡片"],
        "content": "/blogs/2025/GiffGaff卡.md"
    },
    {
        "id": "df762cd1-74b8-4aad-9f40-7cb46e56962d",
        "url": "",
        "slug": "treasure_coding_resource_learn_by_building",
        "createdAt": 1755412805983,
        "title": "🔥 发现了一个宝藏编程学习资源库！从零开始撸项目，比看 100 本教程都管用",
        "description": "分享一个高质量编程学习资源库，包含从零开始构建完整项目的实战教程，涵盖前端开发主流技术栈。通过项目驱动学习方式，系统掌握HTML/CSS、JavaScript、React/Vue等核心技术，每个项目配有详细代码解析和最佳实践指导。这种实践式学习比传统教程更高效，帮助开发者快速提升工程能力，建立完整的项目开发思维。",
        "tags": [JAVASCRIPT, FRAMEWORKS, BUILD_TOOLS, CODE_QUALITY, DESIGN_PATTERNS],
        "content": "/blogs/2025/🔥 发现了一个宝藏编程学习资源库！从零开始撸项目，比看 100 本教程都管用.md"
    },
    {
        "id": "0d3c5222-a72d-4dbf-a5f3-22409aa7a2ca",
        "url": "",
        "slug": "personal_claude_code_configs",
        "createdAt": 1755240005199,
        "title": "‎个人Claude Code常用配置",
        "description": "分享Claude Code开发中的常用配置方案，包括代码格式化规则、lint配置、常用插件和快捷键设置，详细说明如何通过合理的配置提升开发效率和代码质量，适用于个人项目快速搭建标准化开发环境，帮助开发者建立高效的Claude Code工作流。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/‎个人Claude Code常用配置.md"
    },
    {
        "id": "be66c283-6d1f-4720-a959-9e6f458d4b7e",
        "url": "",
        "slug": "claude_sonnet_4_1m_tokens",
        "createdAt": 1755150295851,
        "title": "Claude Sonnet 4 炸了！上下文直接暴涨到 100 万 tokens！",
        "description": "Claude Sonnet 4突破性提升上下文窗口至100万tokens，大幅增强长文本处理能力，支持超长代码库分析、复杂文档理解和持续对话场景。这一升级显著提升了AI在技术文档阅读、全栈项目理解和多轮对话中的表现，为开发者提供更强大的编程辅助工具，特别适合处理大型代码库审查、技术文档摘要等专业场景。",
        "tags": [AI, LLM, PERFORMANCE],
        "content": "/blogs/2025/Claude Sonnet 4 炸了！上下文直接暴涨到 100 万 tokens！.md"
    },
    {
        "id": "02fb21f8-9717-4f3c-86f4-5d2a4bd0e78d",
        "url": "",
        "slug": "stop_perfectionism_build_mvp_first",
        "createdAt": 1755067205803,
        "title": "我不追求完美主义了，先做个垃圾出来！",
        "description": "探讨前端开发中快速迭代的实践方法，分析完美主义对项目进度的负面影响，提供MVP(最小可行产品)开发策略的具体实施步骤。通过真实案例展示如何通过快速原型开发、渐进式优化等技术手段提升开发效率，帮助开发者克服过度优化倾向，建立更务实的产品开发思维模式。",
        "tags": [CODE_QUALITY],
        "content": "/blogs/2025/我不追求完美主义了，先做个垃圾出来！.md"
    },
    {
        "id": "f8cb9353-73c2-4f17-8eeb-38b38f1a9068",
        "url": "",
        "slug": "gpt5_router_failure_openai_response",
        "createdAt": 1754894405381,
        "title": "GPT-5 翻车？GPT-5 因实时路由器故障引发用户集体吐槽，OpenAI 山姆·奥特曼紧急回应",
        "description": "GPT-5实时路由器故障导致服务中断的技术分析，探讨大规模AI系统架构中的关键节点可靠性问题，解析OpenAI官方回应的技术修复方案，为开发者提供高可用AI服务部署的实践参考，包括故障监控、熔断机制和快速响应策略。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/GPT-5 翻车？GPT-5 因实时路由器故障引发用户集体吐槽，OpenAI 山姆·奥特曼紧急回应.md"
    },
    {
        "id": "339f6dc8-d1e5-4920-827f-b9af8c5d08db",
        "url": "",
        "slug": "must_know_tech_for_software_developers",
        "createdAt": 1754817921500,
        "title": "每个软件开发人员应该了解的技术知识的集合",
        "description": "涵盖软件开发必备的核心技术知识体系，包括数据结构与算法、设计模式、网络协议、数据库原理等基础概念，解析版本控制、持续集成、测试驱动开发等工程实践方法，通过典型应用场景展示如何将这些知识应用于实际项目开发，帮助开发者构建完整的技术知识框架，提升编码质量和系统设计能力。",
        "tags": [JAVASCRIPT, PERFORMANCE, DESIGN_PATTERNS, CODE_QUALITY, TESTING],
        "content": "/blogs/2025/每个软件开发人员应该了解的技术知识的集合.md"
    },
    {
        "id": "068d3555-5f2d-498b-9527-424000f88f6a",
        "url": "",
        "slug": "the_fuck_command_line_tool",
        "createdAt": 1754645121378,
        "title": "命令行神器 The Fuck，敲错命令的后悔药",
        "description": "The Fuck是一款智能命令行纠错工具，能够自动修正输入错误的终端命令。通过Python实现的智能匹配算法，它能识别常见拼写错误、路径错误和权限问题，只需输入fuck即可快速修正上条错误命令。文章详细介绍安装配置方法、常用场景优化以及自定义规则编写技巧，帮助开发者显著提升命令行工作效率，减少重复输入和错误排查时间。",
        "tags": [NODEJS, GIT],
        "content": "/blogs/2025/命令行神器 The Fuck，敲错命令的后悔药.md"
    },
    {
        "id": "ae5d3654-e2a7-4b99-8b90-c95e135e0141",
        "url": "",
        "slug": "cross_platform_ai_assistant_for_mcp_llm_lsp",
        "createdAt": 1754472321605,
        "title": "一个支持全平台，且集成多家 MCP、LLM、LSP 编码环境 AI 终端助手",
        "description": "介绍一个全平台兼容的AI终端助手，集成MCP(模型控制平台)、LLM(大语言模型)和LSP(语言服务器协议)等核心技术，提供智能代码补全、错误检测和编程建议功能。通过统一接口支持多种开发环境和编程语言，显著提升开发效率，帮助开发者快速构建和调试跨平台应用，实现智能化编程工作流。",
        "tags": [AI, LLM, JAVASCRIPT, CROSS_PLATFORM, BUILD_TOOLS],
        "content": "/blogs/2025/一个支持全平台，且集成多家 MCP、LLM、LSP 编码环境 AI 终端助手.md"
    },
    {
        "id": "af30028f-8b95-4cbb-a296-142ada9e74ab",
        "url": "",
        "slug": "free_public_api_collection",
        "createdAt": 1754299521309,
        "title": "【开源宝藏项目】无数个免费公共 API 集合",
        "description": "收录了丰富多样的免费公共API资源，涵盖天气、金融、社交媒体等各类数据接口，详细解析每个API的功能特点和使用方法，提供清晰的调用示例和最佳实践，帮助开发者快速集成到项目中，节省开发时间并拓展应用功能，是前端开发者的实用资源宝库。",
        "tags": [REST_API, HTTP, JAVASCRIPT],
        "content": "/blogs/2025/【开源宝藏项目】无数个免费公共 API 集合.md"
    },
    {
        "id": "852baa3a-2791-4059-984f-b43eafc7afce",
        "url": "",
        "slug": "rybbit_open_source_website_analytics_alternative",
        "createdAt": 1754215703604,
        "title": "Rybbit：开源、隐私、轻量的网站分析工具，Google Analytics 的完美替代方案",
        "description": "Rybbit是一款开源的轻量级网站分析工具，专注于用户隐私保护，提供与Google Analytics类似的功能但无需收集敏感数据。它采用自托管方式运行，支持实时访问统计、页面浏览分析等核心功能，通过简洁的API和仪表盘帮助开发者获取网站流量数据。作为GA的替代方案，Rybbit特别适合注重数据隐私的中小型网站，部署简单且资源占用低，无需依赖第三方服务即可实现完整的访客行为分析。",
        "tags": [JAVASCRIPT, PERFORMANCE, SECURITY],
        "content": "/blogs/2025/Rybbit：开源、隐私、轻量的网站分析工具，Google Analytics 的完美替代方案.md"
    },
    {
        "id": "8249f99f-491b-47f3-b3b7-0293b74f448e",
        "url": "",
        "slug": "windows_subsystem",
        "createdAt": 1753500293964,
        "title": "Windows 虚拟系统命令 ",
        "description": "Windows Subsystem for Linux(WSL)在Windows环境下提供完整的Linux内核兼容层，支持原生运行Linux二进制文件。详细介绍WSL2的架构改进、性能优化及系统调用兼容性，演示如何配置开发环境、调试工具链以及实现Windows-Linux混合工作流，帮助开发者高效构建跨平台应用。",
        "tags": [NODEJS, CROSS_PLATFORM],
        "content": "/blogs/2025/Windows 虚拟系统命令.md"
    },
    {
        "id": "7dfd2a8d-8b8f-4e96-9873-159812cd7f35",
        "url": "",
        "slug": "windows_install_claude_code_tutorial",
        "createdAt": 1754042903695,
        "title": "Windows 安装 Claude Code 的新姿势，保姆级教程",
        "description": "详细讲解Windows系统下安装Claude Code的完整流程，涵盖环境配置、依赖安装和常见问题解决，提供图文并茂的步骤说明和命令行操作示例，帮助开发者快速搭建AI编程助手环境，提升代码开发效率。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/Windows 安装 Claude Code 的新姿势，保姆级教程.md"
    },
    {
        "id": "95f747bd-66b6-4b77-9140-1e8c72956b6f",
        "url": "",
        "slug": "my_july_crazy_guy_accident_police_car_new_home",
        "createdAt": 1753870103532,
        "title": "我的7月：变态男、车祸、坐警车、换房子....",
        "description": "分享前端开发者7月经历中的技术实践与成长，包括应对突发事件的应急处理方案、远程协作开发经验以及工作环境迁移的技术适配策略，通过真实案例展示如何在复杂环境下保持开发效率，为开发者提供应对非技术挑战的实用建议。",
        "tags": ['其他'],
        "content": "/blogs/2025/我的7月：变态男、车祸、坐警车、换房子.....md"
    },
    {
        "id": "5e517978-985a-4ae1-9bad-ea001fb92692",
        "url": "",
        "slug": "claude_code_two_weeks_review",
        "createdAt": 1753697303486,
        "title": "深度体验 Claude Code 两周后的感受",
        "description": "分享两周深度使用Claude Code的实践体验，详细分析其代码生成、调试辅助和重构建议等核心功能在实际开发场景中的表现，对比传统开发方式在效率提升和代码质量方面的差异，为开发者评估AI编程助手提供真实参考。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/深度体验 Claude Code 两周后的感受.md"
    },
    {
        "id": "6cc5606b-73a4-4e8c-9e81-39aee97bd5e1",
        "url": "",
        "slug": "coze_open_source_free_for_all",
        "createdAt": 1753524503494,
        "title": "Coze 开源了！所有人都可以免费使用了",
        "description": "Coze正式开源并免费开放使用，这是一个功能强大的前端开发工具集，包含组件库、构建工具和开发辅助功能。开发者可以直接集成到项目中，利用其模块化设计提升开发效率，通过预置的最佳实践减少重复工作。开源版本保留了核心功能，支持自定义扩展，适用于各类Web应用开发场景。",
        "tags": [AI, 'Coze', '智能体', '工作流'],
        "content": "/blogs/2025/Coze 开源了！所有人都可以免费使用了.md"
    },
    {
        "id": "e9913281-53b7-4fda-998c-456d63dea131",
        "url": "",
        "slug": "qwen_code_tutorial_install_to_practice",
        "createdAt": 1753234678009,
        "title": "三分钟上手Qwen Code：从安装到实战，最全教程来了",
        "description": "详细介绍Qwen Code的安装配置与实战应用，涵盖环境搭建、基础语法和项目开发全流程，通过具体案例演示如何快速实现代码生成与自动化任务，帮助开发者高效掌握这一AI编程助手的核心功能和使用技巧。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/三分钟上手Qwen Code：从安装到实战，最全教程来了.md"
    },
    {
        "id": "a84f6f73-dc83-4b00-8d2e-b01606168f98",
        "url": "",
        "slug": "claude_code_logo_prohub_generator",
        "createdAt": 1752831202373,
        "title": "Claude Code 记录：一个 ProHub 风格 logo 生成器",
        "description": "ProHub风格logo生成器的开发过程与技术实现，通过Claude Code记录工具展示前端构建细节。核心围绕SVG动态渲染、色彩算法配置及响应式交互设计，解析如何将GitHub风格设计语言转化为可定制的logo组件。重点包含Canvas绘图API的二次封装、参数化模板系统设计，以及如何通过React Hooks实现实时预览功能。本质是探索设计系统与前端工程的结合点，将品牌视觉规范转化为可编程的代码化组件，提供类似ProGitHub的自动化生成方案。",
        "tags": [JAVASCRIPT, UI_UX, SVG, CANVAS, WEBGL],
        "content": "/blogs/2025/Claude Code 记录：一个 ProHub 风格 logo 生成器.md"
    },
    {
        "id": "1d1264b9-748f-45d1-91c7-3f7fa7d931ec",
        "url": "",
        "slug": "windows_install_use_claude_code_guide",
        "createdAt": 1752658402161,
        "title": "Windows 上安装使用 Claude Code 指南",
        "description": "Windows平台下Claude Code的安装配置步骤与使用技巧，包括环境准备、依赖项安装、常见错误解决方案及优化设置。内容涵盖从下载到运行的全流程操作指南，针对Windows系统特性提供兼容性调整建议，重点解决权限管理、路径配置、依赖冲突等典型问题，同时分享命令行参数调优和插件扩展方法，帮助开发者高效利用Claude Code进行项目开发。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/Windows 上安装使用 Claude Code 指南.md"
    },
    {
        "id": "1b8f6dd9-8059-49ee-acd5-be37afddfbb8",
        "url": "",
        "slug": "openai_windsurf_deal_fails_ceo_joins_google",
        "createdAt": 1752485602687,
        "title": "OpenAI 收购 Windsurf 计划告吹，后者 CEO 及创始人已被谷歌招入麾",
        "description": "OpenAI收购Windsurf的计划未能成功，而Windsurf的CEO及创始人已加入谷歌。这一事件反映了科技行业人才竞争的激烈程度，头部公司通过收购或直接招募核心团队来获取技术优势。OpenAI的收购失败可能源于交易条件、战略匹配或竞品关系，而谷歌迅速吸纳核心成员则凸显其人才战略的主动性。本质上是科技巨头对稀缺人才资源的争夺，同时也揭示了初创企业在巨头博弈中的脆弱性——技术团队可能被拆分吸纳，而非通过收购整体整合。此类动态将影响创业公司的融资估值与退出路径选择。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/OpenAI 收购 Windsurf 计划告吹，后者 CEO 及创始人已被谷歌招入麾.md"
    },
    {
        "id": "0bef5bd1-10f6-491e-a033-78e32d487502",
        "url": "",
        "slug": "1min_turn_resume_into_website_free_tool",
        "createdAt": 1752379318370,
        "title": "1分钟把简历变成个人网站！这个免费工具太香了",
        "description": "一个免费工具能快速将简历转换为个人网站，仅需1分钟即可完成。本质是利用现成模板或自动化技术，将简历内容结构化并生成网页，降低技术门槛。工具可能提供拖拽编辑、预设样式或一键部署功能，突出便捷性和零成本优势，吸引非技术用户。核心价值在于简化个人品牌展示的流程，将传统文档转化为可交互的在线作品集，适合求职者或自由职业者快速建立网络存在感。关键词包括效率、免费、可视化操作和简历转型。",
        "tags": [HTML, CSS, WEB_COMPONENTS, UI_UX, RESPONSIVE_DESIGN],
        "content": "/blogs/2025/1分钟把简历变成个人网站！这个免费工具太香了.md"
    },
    {
        "id": "7299a39a-aa78-4498-92fa-bb8751f5b2ed",
        "url": "",
        "slug": "repo_is_the_wheel_origin_worth_seeing",
        "createdAt": 1752206518874,
        "title": "这个仓库堪称造轮子的鼻祖，建议看看！",
        "description": "一个前端技术仓库因其高度封装和模块化设计成为开发者学习造轮子的经典范例，通过解构其核心实现可掌握底层原理与架构思想。该仓库可能包含自定义框架、工具链或组件库的实现，展示如何从零构建高性能、可复用的前端基础设施。其价值在于揭示技术本质而非简单应用，比如虚拟DOM算法优化、状态管理机制或编译工具链设计。通过分析源码能深入理解前端工程化、设计模式与性能优化策略，适合希望突破应用层、深入技术本质的开发者参考学习。",
        "tags": [JAVASCRIPT, FRAMEWORKS, BUILD_TOOLS, DESIGN_PATTERNS],
        "content": "/blogs/2025/这个仓库堪称造轮子的鼻祖，建议看看！.md"
    },
    {
        "id": "23701f6a-e485-45b8-a677-e3b601bf8a0e",
        "url": "",
        "slug": "one_product_per_month_millionaire_secret",
        "createdAt": 1752033718938,
        "title": "一个月做一个产品，12个月后直接在家躺赚千万，秘诀是...？",
        "description": "通过每月快速开发一个产品并持续迭代，利用复利效应在一年内积累多个盈利项目，最终实现被动收入。核心在于选择轻量级、可自动化运营的细分领域产品，结合低成本获客策略（如SEO、内容营销）和标准化流程，降低边际成本。本质是规模化最小可行产品（MVP）的批量复制能力，将时间杠杆转化为资产杠杆，关键在于产品筛选标准、快速验证方法论和自动化运维体系的搭建，而非单一爆款。",
        "tags": [AI, LLM, AGI],
        "content": "/blogs/2025/一个月做一个产品，12个月后直接在家躺赚千万，秘诀是...？.md"
    },
    {
        "id": "a46ae7fb-2938-4e5a-bf01-52f887445ea0",
        "url": "",
        "slug": "free_claude_code_100_dollars",
        "createdAt": 1751860918755,
        "title": "快来免费领取 Claude Code $100 美金的额度",
        "description": "免费获取Claude Code平台100美元额度的机会，通过限时活动推广AI开发资源。重点突出零成本获取高额代金券的方式，吸引前端开发者体验Claude的API服务。本质是利用金钱激励手段进行产品推广，通过\"免费领取\"和\"$100美金\"等关键词制造稀缺性和价值感，刺激用户快速行动。内容可能包含注册指引、兑换教程和额度使用场景说明，旨在降低用户使用门槛并引导转化。标题设计遵循互联网营销常见模式：利益点前置+数字量化+行动号召，核心目标是实现用户增长和产品试用。",
        "tags": [AI, LLM],
        "content": "/blogs/2025/快来免费领取 Claude Code $100 美金的额度.md"
    },
    // {
    //     "id": "f1a7f388-6a14-46ad-af9e-1aeb4fee032b",
    //     "url": "",
    //     "slug": "one-click_ai_podcast_zero_cost_no_barrier",
    //     "createdAt": 1750402803802,
    //     "title": "一键生成 AI 播客！0 成本、0 门槛",
    //     "description": "前端技术结合AI工具实现零基础生成播客的方法，通过浏览器即可完成全流程操作。无需编程知识，利用现成AI语音合成和内容生成工具，用户输入文本或关键词即可自动生成完整播客音频文件。重点介绍免费开源工具链组合方案，包括文本转语音API调用、背景音乐自动匹配、多语音角色对话模拟等关键技术点。演示如何通过Chrome扩展或Web应用实现一站式制作，涵盖音频剪辑、音量平衡等后期处理自动化技巧。本质是降低内容创作门槛，将传统需要专业软件的音频制作流程简化为网页操作，核心在于合理利用现有AI服务的API接口进行功能整合。",
    //     "tags": [AI, LLM],
    //     "content": "/blogs/2025/一键生成 AI 播客！0 成本、0 门槛.md"
    // },
    // {
    //     "id": "8d75d553-0b00-4658-8af5-04b17532d90e",
    //     "url": "",
    //     "slug": "latest_solutions_for_ios_payment_in_mini_programs",
    //     "createdAt": 1750470582080,
    //     "title": "最新！解决小程序 IOS 支付的几个方法",
    //     "description": "小程序在IOS平台支付功能常见问题的解决方案，包括支付接口调用失败、支付流程中断、支付结果回调异常等场景的处理方法。本质在于分析IOS系统特有的沙盒环境限制、WebView内核差异、证书校验机制等底层技术约束，提出针对性的技术实现方案，如优化支付参数配置、调整异步回调逻辑、适配IOS安全策略等。内容涵盖从开发调试到线上排查的全流程实践技巧，帮助开发者规避支付功能在IOS端的兼容性问题。",
    //     "tags": [MINI_PROGRAM, H5, PLUGIN, BROWSER_EXTENSION],
    //     "content": "/blogs/2025/最新！解决小程序 IOS 支付的几个方法.md"
    // },
    // {
    //     "id": "8e974c38-959e-469a-81d2-9d8858b47bf8",
    //     "url": "",
    //     "slug": "detail_tweaks_must_have_tool",
    //     "createdAt": 1750495359192,
    //     "title": "细节调整，强烈推荐这个工具",
    //     "description": "前端开发中通过特定工具优化细节体验的方法，重点推荐某款能提升效率的实用工具。工具可能涉及CSS微调、性能优化或UI一致性维护，解决开发者手动调整费时、易出错的问题。本质是借助自动化或可视化手段，将重复性细节处理转化为高效工作流，例如间距规范、颜色校对或响应式适配。推荐理由可能包括操作便捷性、团队协作价值或与主流框架的兼容性，最终实现开发精度与速度的双重提升。",
    //     "tags": [BUILD_TOOLS, WEBPACK, VITE],
    //     "content": "/blogs/2025/细节调整，强烈推荐这个工具.md"
    // },
    {
        "id": "88ef0627-5774-438c-8c26-cc83f64069d1",
        "url": "",
        "slug": "claude_code_team_best_practices",
        "createdAt": 1750835794121,
        "title": "Claude Code 官方内部团队最佳实践！",
        "description": "Claude Code官方团队在前端开发中积累的高效工作方法与技术实践，包括代码规范、组件设计原则、性能优化策略、协作流程标准化等核心内容。聚焦团队在复杂项目中的架构决策、自动化工具链配置、错误监控体系搭建等实战经验，揭示如何通过统一技术栈和模块化思维提升开发效率与代码质量。涵盖从需求分析到部署上线的全生命周期管理方案，重点分享内部验证过的Vue/React最佳实现模式、状态管理技巧及跨团队协作机制。",
        "tags": [JAVASCRIPT, REACT, WEBPACK, PERFORMANCE, CODE_QUALITY],
        "content": "/blogs/2025/Claude Code 官方内部团队最佳实践！.md"
    },
    {
        "id": "8c998ac1-2703-4323-9f9d-f9e4909d603a",
        "url": "",
        "slug": "last_product_finally_approved",
        "createdAt": 1750662994164,
        "title": "最后一个产品终于通过审核了！",
        "description": "开发者在多次提交审核后，最后一个产品版本终于通过平台审核的曲折经历。可能涉及反复修改代码、调整UI/UX设计、解决审核团队提出的合规问题，以及应对不同设备或浏览器的兼容性挑战。过程中或许包含技术细节如性能优化、API调用规范，或是与审核团队的沟通策略。本质反映了前端开发中从技术实现到商业落地的完整闭环，以及产品思维与规则约束之间的博弈。最终通过审核标志着开发周期关键节点的完成，为后续迭代奠定基础。",
        "tags": [CI_CD, TESTING],
        "content": "/blogs/2025/最后一个产品终于通过审核了！.md"
    },
    {
        "id": "77e92085-62f5-40b1-a502-61e14f4db3b7",
        "url": "",
        "slug": "top_github_project_must_see",
        "createdAt": 1750576594997,
        "title": "Github 上排名第一的项目，一定要看看！",
        "description": "GitHub上最受欢迎的前端开源项目解析，该项目在star数、贡献者活跃度、issue解决效率等维度均位列平台榜首。从技术架构、核心功能、社区生态三个层面深度剖析其成功要素：采用现代化技术栈实现高性能渲染，通过插件机制满足多样化需求，完善的文档体系和活跃的开发者社区推动项目持续进化。重点解读项目设计思想中对开发者体验的极致追求，包括清晰的API设计、友好的错误提示和模块化的代码结构。最后给出具体的使用场景示例和性能优化建议，帮助开发者快速掌握这个标杆级项目的精髓。",
        "tags": [JAVASCRIPT, REACT, VUE, FRAMEWORKS, GIT],
        "content": "/blogs/2025/Github 上排名第一的项目，一定要看看！.md"
    },
    {
        "id": "d2d014c6-2dba-4a9c-ba64-72b5bf9be868",
        "url": "",
        "slug": "new_wechat_feature_must_enable",
        "createdAt": 1750144594170,
        "title": "公众号出新玩法！一定开启这个权益！",
        "description": "微信公众号推出新功能或权益，强调用户必须开启该权益以获得更好的体验或额外收益。内容可能涉及公众号运营策略、新功能的使用方法、如何通过开启权益提升互动效果或增加收益。本质是吸引公众号运营者关注新变化，利用新权益优化内容传播和用户互动，从而提升公众号的影响力和变现能力。",
        "tags": [MINI_PROGRAM, H5, PLUGIN, BROWSER_EXTENSION],
        "content": "/blogs/2025/公众号出新玩法！一定开启这个权益！.md"
    },
    {
        "id": "9598162b-6d1e-49ec-8008-94fe0ec044f4",
        "url": "",
        "slug": "vibe_coding_tips_worth_learning",
        "createdAt": 1750390186000,
        "title": "这几个 Vibe Coding 经验，真的建议学！",
        "description": "Vibe Coding是一种强调开发氛围与愉悦体验的编程方式，其核心在于通过特定技巧提升前端开发的效率与乐趣。内容可能涉及如何优化工作流、选择高效工具、保持代码整洁性、利用现代框架特性，以及通过团队协作创造积极编码环境。本质上是将开发者心理状态与技术实践结合，减少机械性劳动，增加创造性空间。这些经验通常包括快捷键使用、自动化脚本编写、调试技巧、代码可读性提升方法等实用细节，旨在帮助开发者建立更流畅、愉悦的编码节奏，最终形成可持续的高效开发习惯。",
        "tags": [JAVASCRIPT, REACT, VUE, PERFORMANCE, DESIGN_PATTERNS],
        "content": "/blogs/2025/这几个 Vibe Coding 经验，真的建议学！.md"
    },
    {
        "id": "13d7c77d-f7aa-47ac-a59e-a2a4aedfa1e8",
        "url": "",
        "slug": "my_second_vibe_coding_project",
        "createdAt": 1750217386000,
        "title": "我的 Vibe Coding 的第二个项目",
        "description": "作者分享个人前端开发历程中第二个项目的实践经验，聚焦Vibe Coding风格下的技术实现与创意表达。内容可能包含项目选题背景、技术栈选型依据、开发过程中遇到的典型问题及解决方案，重点突出区别于首个项目的独特设计思路或技术突破。涉及响应式布局实现、交互细节优化或特定框架的深度应用，体现从入门到进阶的成长轨迹。通过具体案例展示如何将编程逻辑与视觉美学结合，可能附带代码片段或效果演示链接，为读者提供可复用的开发模式参考。",
        "tags": [JAVASCRIPT, REACT, VUE, NEXTJS, NUXTJS],
        "content": "/blogs/2025/我的 Vibe Coding 的第二个项目.md"
    },
    {
        "id": "3d3c2911-13b3-46d1-87cc-b4f56ef9f2e4",
        "url": "",
        "slug": "google_cloud_causes_global_internet_outage",
        "createdAt": 1750044586000,
        "title": "一篇文章带你了解清楚，Google Cloud 引发全球互联网服务大面积故障问题",
        "description": "Google Cloud服务故障导致全球互联网服务中断的原因、影响范围及技术细节，分析故障背后的根本问题，如基础设施依赖、单点故障风险、云服务可靠性机制失效等，探讨此类事件对开发者架构设计的启示，包括容灾方案、多云策略、监控体系优化等应对措施。",
        "tags": ['Other'],
        "content": "/blogs/2025/一篇文章带你了解清楚，Google Cloud 引发全球互联网服务大面积故障问题.md"
    },
    {
        "id": "854d26f0-34b7-4da3-8902-5b4e4670ac3a",
        "url": "",
        "slug": "my_first_vibe_coding_project",
        "createdAt": 1749776192000,
        "title": "我的 Vibe Coding 的第一个项目",
        "description": "作者分享个人在Vibe Coding平台上开发的第一个前端项目经历，从零开始构建的完整过程，包括技术选型、开发挑战、解决方案和最终成果。内容聚焦初学者如何运用HTML、CSS和JavaScript等基础技术实现首个作品，涉及代码结构设计、功能实现细节、调试技巧以及项目部署经验。通过真实项目案例展示前端开发的实践路径，反映从学习到实战的思维转变，同时可能包含对Vibe Coding平台特性的使用感受，为其他入门者提供可复用的开发思路和避坑指南。",
        "tags": [JAVASCRIPT, REACT, HTML, CSS, VITE],
        "content": "/blogs/2025/我的 Vibe Coding 的第一个项目.md"
    },
    {
        "id": "cb379b08-5a33-4dd6-adf2-ee1a6edce8c9",
        "url": "",
        "slug": "recent_vibe_coding_experience_share",
        "createdAt": 1749603392000,
        "title": "最近Vibe Coding的经验分享总结",
        "description": "Vibe Coding是一种新兴的前端开发方式，强调通过氛围感提升编码体验与效率。内容可能包含如何通过音乐、灯光、环境布置等元素营造沉浸式编程环境，分享具体工具如VS Code主题、氛围音乐播放器、物理环境改造方案。涉及心理学层面分析环境对代码质量的影响，提供数据支撑不同氛围下的开发效率对比。列举实际案例展示Vibe Coding在团队协作中的实践，包括远程工作场景下的氛围同步技巧。探讨如何平衡个性化环境与标准化开发流程，给出可量化的氛围优化指标。最后可能附上作者个人推荐的Vibe Coding装备清单及配置参数。",
        "tags": [JAVASCRIPT, REACT, VITE, PERFORMANCE, BUILD_TOOLS],
        "content": "/blogs/2025/最近Vibe Coding的经验分享总结.md"
    },
    {
        "id": "cefc75bd-4f63-48cf-ad7f-e04aacfd5b5a",
        "url": "",
        "slug": "ai_auto_flowchart_tool",
        "createdAt": 1749430592000,
        "title": "分享一个 AI 自动生成流程图的工具",
        "description": "AI流程图生成工具的功能演示与使用场景解析，通过自然语言输入自动转化为可视化流程图结构。工具核心价值在于降低技术绘图门槛，非设计专业人员也能快速创建专业级架构图、思维导图或业务流程图。重点分析工具的交互逻辑：用户输入文字描述后，AI自动识别关键节点和逻辑关系，应用布局算法生成可编辑的矢量图形。对比传统绘图软件，突出其智能排版、实时协作和版本回溯特性。列举典型应用案例，如快速原型设计、文档自动化配图和教育课件制作。最后提供实用技巧：如何通过关键词优化输入指令，调整生成风格（UML/BPMN等），以及导出为PNG/SVG格式的注意事项。",
        "tags": [AI],
        "content": "/blogs/2025/分享一个 AI 自动生成流程图的工具.md"
    },
    {
        "id": "0ab715bc-0e97-47dc-833d-4fcfbdded4b9",
        "url": "",
        "slug": "cursor_mdc_generator_based_on_gemini_2_5",
        "createdAt": 1749084992000,
        "title": "分享一个 Cursor mdc 生成器，基于 Gemini 2.5，很实用！",
        "description": "Cursor MDC生成器是一款基于Gemini 2.5技术开发的实用工具，旨在帮助前端开发者快速生成Material Design Components（MDC）的代码片段。该工具通过智能化的方式简化了MDC组件的创建过程，提升了开发效率。Gemini 2.5作为底层技术，提供了强大的自然语言处理能力，使得生成器能够准确理解用户需求并输出高质量的代码。博客内容可能包含生成器的使用场景、功能特点、操作步骤以及实际案例展示，重点突出其在前端开发中的便捷性和实用性。本质上是将AI技术与前端工具结合，解决MDC组件开发中的重复性工作问题。",
        "tags": [JAVASCRIPT, AI, LLM],
        "content": "/blogs/2025/分享一个 Cursor mdc 生成器，基于 Gemini 2.5，很实用！.md"
    },
    {
        "id": "cf2b798a-126e-4152-ae2b-a1985d20b6ef",
        "url": "",
        "slug": "latest_indie_dev_budget_pack",
        "createdAt": 1748770191682,
        "title": "最新！独立开发者穷鬼套餐",
        "description": "独立开发者如何在预算有限的情况下搭建高效前端开发环境，列举低成本甚至免费的工具、框架、云服务和资源，涵盖代码编辑器、UI组件库、托管平台、自动化部署等关键环节的替代方案，分析免费方案的优缺点和适用场景，提供技术选型策略和避坑指南，帮助个人开发者在资源受限时仍能保持生产力，可能涉及VSCode插件配置、开源项目利用、学生优惠获取、轻量级替代工具对比等内容。",
        "tags": [JAVASCRIPT, REACT, VUE, WEBPACK, VITE],
        "content": "/blogs/2025/最新！独立开发者穷鬼套餐.md"
    },
    {
        "id": "e8fc799f-2ced-48cf-998a-bd59e3bdf258",
        "url": "",
        "slug": "personal_choices_marriage_settlement",
        "createdAt": 1747662886127,
        "title": "【关于个人】终究要面对的选择：结婚、定居",
        "description": "个人成长过程中无法回避的人生抉择，聚焦婚姻与定居两大核心议题。从社会压力、家庭期待与自我实现的矛盾切入，剖析当代青年在传统观念与现代价值观碰撞下的困境。本质是对人生路径的深度思考，涉及个体自由与社会责任的平衡、短期欲望与长期规划的冲突。通过具体生活场景展现选择背后的经济成本、情感投入与身份转变，反映城市化进程中年轻人面临的归属感缺失与身份认同焦虑。最终指向个体如何在外部期待与内心需求间寻找自洽路径，完成从依赖到独立的心理蜕变。",
        "tags": ["人生选择"],
        "content": "/blogs/2025/【关于个人】终究要面对的选择：结婚、定居.md"
    },
    {
        "id": "57ee4580-cd20-456b-94e8-10ce1fe1f146",
        "url": "",
        "slug": "must_have_ai_podcast_tool",
        "createdAt": 1748082435336,
        "title": "这款AI生成播客工具，必须收藏！",
        "description": "一款利用人工智能技术自动生成播客内容的工具，通过算法实现文本转语音、智能剪辑及多语言适配功能，显著降低内容创作门槛。其核心价值在于将复杂的音频制作流程简化为三步操作：输入脚本、选择音色、导出成品，同时支持背景音乐智能匹配和情感语调调节。工具内置的深度学习模型能模仿真人主播的抑扬顿挫，解决传统合成语音机械感问题。典型应用场景包括自媒体快速量产节目、企业定制品牌播客及教育机构制作听力材料。关键优势体现在处理长文本的稳定性、支持超过20种音色的细粒度调节，以及API接入能力允许与企业现有系统集成。数据层面显示，使用该工具的用户平均节省87%的音频制作时间，且生成内容的自然度在盲测中达到真人录音85%的相似度。",
        "tags": [AI],
        "content": "/blogs/2025/这款AI生成播客工具，必须收藏！.md"
    },
    {
        "id": "28f9aa16-69f8-41b6-8c54-bbf8dcf08677",
        "url": "",
        "slug": "quietly_released_claude_4_at_night",
        "createdAt": 1747965986000,
        "title": "Anthropic 深夜发布最强模型：Claude 4",
        "description": "Claude 4模型在夜间低调上线，可能涉及新版本功能迭代或性能优化。发布时机的选择暗示技术团队避免引发过度关注，或是应对竞品突然更新的策略。作为AI领域重要升级，模型可能强化了自然语言理解、多模态处理或推理能力。深夜发布通常伴随技术博客的详细解析，包括基准测试对比、API接口变动及开发者迁移指南。这种非黄金时段的推送方式，往往针对专业开发者群体，内容会深入探讨架构改进、训练数据优化等核心技术细节，同时可能包含使用限制和伦理考量说明。",
        "tags": [AI, AGI, LLM],
        "content": "/blogs/2025/Anthropic 深夜发布最强模型：Claude 4.md"
    },
    {
        "id": "8f97c3a3-a6e7-4c6c-b386-70bc846386a2",
        "url": "",
        "slug": "361k_star_project_must_bookmark",
        "createdAt": 1747879586000,
        "title": "这个 361K Star 的项目，一定要收藏！",
        "description": "一个拥有36.1万Star的高人气开源项目，值得开发者重点关注和收藏。项目可能涉及前端热门技术或工具，如框架、库、构建工具等，因其广泛认可和社区高评价而成为行业标杆。内容可能包含项目核心功能、应用场景、优势分析或实践案例，帮助读者快速理解其价值。本质是通过数据量化项目影响力（Star数），利用从众心理和稀缺性（“一定要”）吸引开发者学习稀缺资源，同时暗示项目经过大规模验证，降低读者决策成本。标题策略结合了数据背书、权威暗示和行动号召，精准切中开发者对技术选型的痛点需求。",
        "tags": [JAVASCRIPT, REACT, VUE, FRAMEWORKS, BUILD_TOOLS],
        "content": "/blogs/2025/这个 361K Star 的项目，一定要收藏！.md"
    },
    {
        "id": "5d2c0bbc-5644-454e-8f37-2bbd6532857e",
        "url": "",
        "slug": "share_a_350k_star_treasure_repo",
        "createdAt": 1747665581000,
        "title": "分享一个 35万+ Star 的宝藏仓库",
        "description": "一个拥有超过35万Star的高质量开源项目，可能涉及前端开发工具、框架、组件库或实用资源库。这类仓库通常具备高可靠性、广泛社区认可度和长期维护价值，内容可能包含前沿技术实现、高效开发解决方案或可复用的优秀代码范例。其核心价值在于为开发者提供经过实战检验的技术方案，节省重复造轮子的时间成本，同时反映当前前端领域的技术趋势和最佳实践。这类高星项目往往具有清晰的文档、活跃的社区和良好的扩展性，能够显著提升开发效率或解决特定领域的技术难题。",
        "tags": [JAVASCRIPT, FRAMEWORKS, BUILD_TOOLS, GIT, CODE_QUALITY],
        "content": "/blogs/2025/分享一个 35万+ Star 的宝藏仓库.md"
    },
    {
        "id": "85c6a6ab-8384-4142-9d63-39762ea296fd",
        "url": "",
        "slug": "how_llms_think_and_respond_quickly",
        "createdAt": 1746801581000,
        "title": "LLM是如何“思考”的？又是如何让AI快速响应下一步的？",
        "description": "大语言模型通过概率预测生成连贯文本，其“思考”本质是上下文关联的数学计算。模型基于海量训练数据建立词元间的统计关系，利用注意力机制动态分配权重，通过自回归方式逐字生成响应。快速响应的核心在于Transformer架构并行计算能力，结合KV缓存、量化推理等技术优化延迟。模型本身不具备意识，输出是参数空间内最可能的词序列组合。",
        "tags": [AI],
        "content": "/blogs/2025/LLM是如何“思考”的？又是如何让AI快速响应下一步的？.md"
    },
    {
        "id": "8f40a9ae-defc-4f7d-9aa9-e14b484e9662",
        "url": "",
        "slug": "claude_updated_major_feature_last_night",
        "createdAt": 1746748697972,
        "title": "最新！Claude 深夜又更新了这一重大功能",
        "description": "Claude最新版本推出了一项重要功能更新，该功能可能涉及AI模型性能提升、交互方式优化或新增实用工具。此次更新或聚焦于自然语言处理能力的增强，比如上下文理解更精准、响应速度更快，也可能包含多模态支持扩展，例如新增图片解析或文件处理能力。功能改进背后反映了AI技术持续迭代的趋势，旨在提升用户体验与工作效率。具体更新细节可能包括代码生成优化、知识库更新或API接口调整，这些改进将直接影响开发者与普通用户的使用体验。",
        "tags": [JAVASCRIPT, FRAMEWORKS, BUILD_TOOLS],
        "content": "/blogs/2025/最新！Claude 深夜又更新了这一重大功能.md"
    },
    {
        "id": "0c33f656-f594-4579-b5a2-b8d7f0c4a7b9",
        "url": "",
        "slug": "llm_json_errors_fixed_this_holiday",
        "createdAt": 1746364692110,
        "title": "LLM输出JSON格式频频出错？直到我五一假期发现这个方法",
        "description": "大型语言模型生成JSON时容易出现格式错误，作者在五一假期期间发现了一种有效解决方法。文章可能涉及LLM输出JSON的常见问题如括号不匹配、引号缺失或转义错误，并针对性地提出解决方案。本质在于通过特定技巧或工具优化提示词设计，或引入中间处理层来规范化输出。可能包含具体实践案例，比如调整temperature参数、使用结构化模板或后处理校验脚本，最终实现稳定可靠的JSON生成。",
        "tags": [JAVASCRIPT, REST_API],
        "content": "/blogs/2025/LLM输出JSON格式频频出错？直到我五一假期发现这个方法.md"
    },
    {
        "id": "aca64c19-e94d-4038-a04d-62c1c3dceb34",
        "url": "",
        "slug": "web_api_new_features",
        "createdAt": 1746239339000,
        "title": "这个Web新API让任何内容都能画中画！",
        "description": "Web API新特性聚焦于现代浏览器提供的创新功能与接口，涵盖性能优化、用户交互增强及数据处理能力。包括Fetch API替代传统XHR实现高效网络请求，Intersection Observer优化懒加载与广告追踪，Web Workers多线程处理复杂计算，以及Web Components实现模块化开发。新增的Clipboard API简化剪贴板操作，Geolocation API支持地理位置服务，而Web Storage与IndexedDB提升本地数据存储效率。这些特性本质是浏览器生态对开发效率与用户体验的底层支持，通过标准化接口降低开发复杂度，推动前端技术向更高效、更交互式的方向发展。",
        "tags": [JAVASCRIPT, BROWSER_APIS, WEB_COMPONENTS, WEBSOCKETS, HTTP],
        "content": "/blogs/2025/这个Web新API让任何内容都能画中画！.md"
    },
    {
        "id": "597919d1-778b-4adf-b1ea-d11b5bc67499",
        "url": "",
        "slug": "browser_download_must_enable_hidden_feature",
        "createdAt": 1745736207000,
        "title": "浏览器下载，一定要开启这个隐藏功能！",
        "description": "浏览器下载功能中隐藏的加速或优化选项通常被用户忽略，例如多线程下载、断点续传或安全验证绕过等。该功能可能涉及开发者工具中的实验性设置、第三方插件配置或浏览器内置参数的调整，本质是通过技术手段突破默认下载限制，提升效率或安全性。文章可能具体演示如何启用这类功能（如Chrome的flags页面或about:config参数），并分析其原理（如分块传输、并行请求），同时提醒用户权衡性能提升与潜在风险（如资源占用、隐私泄露）。标题的“隐藏”暗示了非公开但合法的优化技巧，吸引用户探索浏览器更深层的使用方式。",
        "tags": [BROWSER_APIS],
        "content": "/blogs/2025/浏览器下载，一定要开启这个隐藏功能！.md"
    },
    {
        "id": "a4518d97-89ee-45b4-a4fa-ed7cd0250209",
        "url": "",
        "slug": "promise_new_api_so_good",
        "createdAt": 1744963872617,
        "title": "Promise 这个新 API 真香！",
        "description": "Promise API解决了JavaScript异步编程的回调地狱问题，通过链式调用then/catch方法让代码更清晰。其本质是将异步操作抽象为三种状态（pending/fulfilled/rejected）的对象，利用微任务队列实现异步调度。核心优势在于可组合性——支持Promise.all/race等组合操作，错误冒泡机制让异常集中处理。相较于传统回调，它能更好地分离业务逻辑与异步控制流，配合async/await语法糖可写出接近同步风格的异步代码。",
        "tags": [JAVASCRIPT, BROWSER_APIS],
        "content": "/blogs/2025/Promise 这个新 API 真香！.md"
    },
    {
        "id": "1b85e188-e801-4ee8-9e22-a3115808672a",
        "url": "",
        "slug": "my_product_story_origin_indie_tools",
        "createdAt": 1745453913000,
        "title": "关于我的产品故事起源之 Indie Tools",
        "description": "关于我的个人产品故事，分享产品的背景与诞生过程~",
        "tags": [BUILD_TOOLS, FRAMEWORKS, UI_UX],
        "content": "/blogs/2025/关于我的产品故事起源之 Indie Tools.md"
    },
    {
        "id": "ac4e0909-c580-41fe-8649-a028ed7de68d",
        "url": "",
        "slug": "docx_preview_must_use_this_lib",
        "createdAt": 1744071581000,
        "title": "做Docx预览，一定要做这个神库！",
        "description": "Docx预览功能在前端开发中常遇到兼容性问题，而某个特定库能高效解决这一痛点。该库可能具备轻量化、跨平台渲染一致性、样式保真度高等核心优势，支持复杂表格、公式、批注等Word特有元素的精准解析。其底层或采用WebAssembly或虚拟DOM技术优化性能，避免传统转PDF或依赖后端方案带来的延迟。博客会对比常见方案如Mammoth.js或Office Online的局限性，强调该库在加载速度、交互能力或移动端适配上的突破性表现。可能涉及如何通过API实现实时编辑、水印添加等扩展功能，并提供代码片段演示基础集成步骤。",
        "tags": [JAVASCRIPT, REACT, VUE, WEBPACK, VITE],
        "content": "/blogs/2025/做Docx预览，一定要做这个神库！.md"
    },
    // {
    //     "id": "aabae14d-748a-43ec-bbeb-c97560a9ab17",
    //     "url": "",
    //     "slug": "must-know_mcp_websites",
    //     "createdAt": 1743553181000,
    //     "title": "关于MCP，这几个网站你一定要知道！",
    //     "description": "MCP相关的高质量网站资源推荐，列举多个对前端开发者有价值的网站，涵盖工具、教程、社区或案例库等方向，帮助读者快速获取MCP相关的高效学习途径或实用工具。本质是通过精选资源整合，解决开发者信息过载问题，直接提供经过筛选的优质信息入口，提升学习效率。可能涉及网站类型包括官方文档平台、第三方工具站、技术博客、开源项目库或在线实验环境等，每个推荐会附带核心价值点说明。",
    //     "tags": [JAVASCRIPT, REACT, VUE, ANGULAR, FRAMEWORKS],
    //     "content": "/blogs/2025/关于MCP，这几个网站你一定要知道！.md"
    // },
    {
        "id": "6f5efec3-25b8-4d12-a061-0c5c9dac04ba",
        "url": "",
        "slug": "must_learn_10k_star_nodejs_project",
        "createdAt": 1743121181000,
        "title": "关于Node.js，一定要学这个10+万Star项目 ！！",
        "description": "Node.js领域内一个超过10万Star的开源项目具有极高学习价值，其核心在于通过真实的高质量代码库展示Node.js的最佳实践、架构设计与性能优化方案。该项目可能涉及服务端开发核心场景如异步编程、模块化、中间件机制、Stream处理或全栈框架集成，其社区活跃度和广泛采用证明了技术方案的可靠性。学习此类项目能快速掌握企业级开发中的关键技巧，理解如何构建可扩展的Node.js应用，同时接触前沿生态工具链。Star数量作为技术影响力的量化指标，暗示项目解决了开发者普遍痛点，可能是Express、NestJS等主流框架或工具库的底层实现。通过逆向工程这类项目，开发者能突破基础语法层面向工程化进阶。",
        "tags": [NODEJS, JAVASCRIPT, EXPRESS, BUILD_TOOLS, PERFORMANCE],
        "content": "/blogs/2025/关于Node.js，一定要学这个10+万Star项目 ！！.md"
    },
    {
        "id": "50e2a867-c811-40c2-8db8-31d5f15b23a4",
        "url": "",
        "slug": "must_use_this_amazing_lib_for_timed_tasks",
        "createdAt": 1742960051000,
        "title": "做定时任务，一定要用这个神库！！",
        "description": "前端开发中实现定时任务的高效解决方案，重点推荐特定功能强大的第三方库。剖析该库的核心优势：精准的定时调度能力、轻量级无依赖的设计、兼容浏览器与Node.js环境。本质在于解决原生setInterval的缺陷（如时间漂移、内存泄漏），提供链式API、错误恢复机制和可视化调试工具。通过对比传统方案，突显其异常处理、性能优化和跨平台支持特性，最终以代码示例展示秒级任务、循环策略等实战场景的应用价值。",
        "tags": [JAVASCRIPT, NODEJS],
        "content": "/blogs/2025/做定时任务，一定要用这个神库！！.md"
    },
    {
        id: '79f2b760-3cb9-435d-af44-0aa16bee87ac',
        url: '',
        slug: 'from_developer_to_instructor_teaching_ai_coding',
        createdAt: 1742791325000,
        title: '从开发者到讲师，我第一次教跨行业AI写代码的心路历程',
        description:
            '一位前端开发者转型为讲师，首次尝试教授跨行业学员使用AI工具编写代码的经历。文章分享了从技术实践到教学设计的转变过程，探讨了如何将复杂的编程概念简化以适应非技术背景学员的需求。重点分析了教学过程中遇到的挑战，如学员理解差异、AI工具的局限性，以及如何通过调整教学策略提升学习效果。同时，反思了自身从开发者到教育者的角色转变，强调了沟通与耐心在跨行业教学中的重要性。',
        tags: [JAVASCRIPT, AI, FRAMEWORKS],
        content: '/blogs/2025/从开发者到讲师，我第一次教跨行业AI写代码的心路历程.md',
    },
    {
        id: '75dfd2d1-cc1b-4b23-8d2b-912480751110',
        url: '',
        slug: 'ai_understand_your_questions',
        createdAt: 1742524112000,
        title: 'AI 真的懂你问的问题吗？',
        description:
            'AI在理解用户问题方面的能力是有限的，尽管它能够处理大量数据并生成看似合理的回答，但其本质是基于模式识别和概率计算，而非真正的理解。AI缺乏人类的情境感知和深层逻辑推理能力，因此在处理复杂、模糊或需要背景知识的问题时，可能会出现误解或错误回答。AI的“理解”更多是表面化的，依赖于训练数据的广度和质量，而非真正的认知能力。',
        tags: [JAVASCRIPT, AI, FRAMEWORKS, STATE_MANAGEMENT, BUILD_TOOLS],
        content: '/blogs/2025/AI 真的懂你问的问题吗？.md',
    },
    {
        id: 'b2058c0e-ba5c-4f73-b104-71bdf0c6b6e2',
        url: '',
        slug: 'search_tips_you_dont_know',
        createdAt: 1742371060000,
        title: '这些搜索技巧你不会？',
        description:
            '文章深入探讨了前端开发中常用的搜索技巧，帮助开发者更高效地查找和解决问题。内容包括如何利用浏览器的开发者工具快速定位代码、使用正则表达式进行高级搜索、掌握搜索引擎的高级语法以精准获取资源、以及如何利用快捷键和插件提升搜索效率。通过这些技巧，开发者可以显著减少调试时间，提高工作效率，从而更专注于核心开发任务。',
        tags: [JAVASCRIPT, HTML, CSS, SEO, BROWSER_APIS],
        content: '/blogs/2025/这些搜索技巧你不会？.md',
    },
    {
        id: '233596a9-65b5-43ef-be7a-b57be7593e94',
        url: '',
        slug: 'true_ai_boom_what_is_it',
        createdAt: 1742002137836,
        title: '真正的AI风口，竟是它？',
        description:
            '真正的AI风口并非传统认知中的通用人工智能，而是聚焦于特定领域和场景的垂直AI应用。这些应用通过深度学习、自然语言处理等技术，在医疗、金融、教育等行业中实现高效解决方案。垂直AI的优势在于其针对性强、数据需求相对较少且易于落地，能够快速产生商业价值。随着技术成熟和市场需求增长，垂直AI将成为推动AI产业发展的核心动力，引领下一波技术革命。',
        tags: [JAVASCRIPT, REACT, VUE, ANGULAR, FRAMEWORKS],
        content: '/blogs/2025/真正的AI风口，竟是它？.md',
    },
    // {
    //     id: '81e03952-aaa4-481e-aa0d-92a64cfb0776',
    //     url: '',
    //     slug: 'self_media_hot_trends_36_top_accounts_secrets',
    //     createdAt: 1741596361000,
    //     title: '自媒体爆款秘籍：36个一线大号都在偷偷用的热搜平台',
    //     description:
    //         '自媒体爆款秘籍揭示了36个一线大号常用的热搜平台，帮助内容创作者快速获取流量和曝光。这些平台包括社交媒体、搜索引擎、新闻聚合工具等，通过分析热门话题、关键词和用户行为，优化内容策略。本质在于利用数据驱动的内容分发机制，精准捕捉用户兴趣，提升内容传播效率，从而实现爆款内容的打造和持续增长。',
    //     tags: [SEO, PERFORMANCE, RESPONSIVE_DESIGN, UI_UX, WEB_COMPONENTS],
    //     content: '/blogs/2025/自媒体爆款秘籍：36个一线大号都在偷偷用的热搜平台.md',
    // },
    // {
    //     id: 'dea89bf4-7d5e-46c0-a318-bbc7ea9355b2',
    //     url: '',
    //     slug: 'top_10_payment_platforms_analysis_for_developers',
    //     createdAt: 1739979252195,
    //     title: '【实战分享】10大支付平台全方面分析，独立开发必备！',
    //     description:
    //         '文章深入剖析了10大主流支付平台的核心特点、技术实现、API集成、费用结构及适用场景，为独立开发者提供全面的支付解决方案参考。内容涵盖支付流程优化、安全性设计、用户体验提升及多平台兼容性，帮助开发者快速选择适合的支付工具，降低开发成本，提升项目商业化能力。',
    //     tags: [JAVASCRIPT, REST_API, SECURITY, PERFORMANCE, TESTING],
    //     content: '/blogs/2025/【实战分享】10大支付平台全方面分析，独立开发必备！.md',
    // },
    {
        id: '475aa1b6-f320-4f9f-9fdc-5c5290b9873f',
        url: '',
        slug: 'complete_summary_js_new_features_last_5_years',
        createdAt: 1740976074000,
        title: '【完整汇总】近 5 年 JavaScript 新特性完整总览',
        description:
            '近5年JavaScript新特性全面梳理，涵盖ES2015至ES2022的核心更新，包括箭头函数、类、模块化、Promise、async/await、可选链、空值合并、BigInt、动态导入、私有字段、顶层await等语法改进与API增强，帮助开发者快速掌握现代JavaScript开发的核心工具与最佳实践。',
        tags: [JAVASCRIPT, BROWSER_APIS, FRAMEWORKS, BUILD_TOOLS, DESIGN_PATTERNS],
        content: '/blogs/2025/【完整汇总】近 5 年 JavaScript 新特性完整总览.md',
    },
    {
        id: '3d6dab16-e3cd-43da-8e36-946275fd8cd7',
        url: '',
        slug: 'independent_dev_perks_product_promo_400_plus_backlinks_limited_offer',
        createdAt: 1739158969167,
        title: '独立开发者福利：产品推广 + 400+ 外链资源，限量开抢！',
        description:
            '独立开发者可通过该资源获取产品推广支持及超过400个外链资源，帮助提升产品曝光度和SEO效果。资源限量提供，适合需要快速扩大影响力的开发者。本质是为独立开发者提供高效的市场推广工具，解决产品初期流量和品牌认知度问题，助力产品快速成长。',
        tags: [SEO],
        content: '/blogs/2025/独立开发者福利：产品推广 + 400+ 外链资源，限量开抢！.md',
    },
    {
        id: '8d3129c8-d477-4453-996d-3a7823f8c363',
        url: '',
        slug: 'claude_3.7_vs_deepseek_vs_gpt-4o_ai_king',
        createdAt: 1740726577000,
        title: '深度对比：Claude 3.7 vs DeepSeek vs GPT-4o，谁才是真正的AI之王？',
        description:
            'Claude 3.7、DeepSeek和GPT-4o在AI领域的性能、应用场景和技术特点进行深度对比，分析各自在自然语言处理、生成能力和实际应用中的表现，探讨谁在AI技术中占据领先地位，成为真正的AI之王。',
        tags: [PERFORMANCE, ALGORITHMS, DATA_STRUCTURES, FRAMEWORKS, CODE_QUALITY],
        content: '/blogs/2025/深度对比：Claude 3.7 vs DeepSeek vs GPT-4o，谁才是真正的AI之王？.md',
    },
    {
        id: 'ff043d5a-3a3e-4113-b110-dd879009214d',
        url: '',
        slug: 'master_this_api_boost_web_display_10x',
        createdAt: 1740319374485,
        title: '掌握这个API，让你的网页展示效果提升10倍',
        description:
            '通过深入解析某个关键API的使用方法和优化技巧，帮助开发者显著提升网页的展示效果。内容涵盖API的核心功能、实际应用场景、性能优化策略以及常见问题的解决方案，旨在通过高效利用API实现更流畅的动画、更快的加载速度和更丰富的交互体验，从而让网页在视觉效果和用户体验上达到质的飞跃。',
        tags: [JAVASCRIPT, BROWSER_APIS, PERFORMANCE, ANIMATION, UI_UX],
        content: '/blogs/2025/掌握这个API，让你的网页展示效果提升10倍.md',
    },
    {
        id: '85c78de5-f73c-44ed-82d1-6e495e98b7c1',
        url: '',
        slug: 'product_ideas_from_your_questions_inspiration_steps',
        createdAt: 1740182129000,
        title: '从日常吐槽到爆款产品，我是这样做的',
        description:
            '产品的创意往往源于对用户问题的深入理解和洞察。通过分析用户需求、痛点和使用场景，可以激发灵感并形成创新解决方案。具体步骤包括：收集用户反馈、识别核心问题、头脑风暴创意、筛选可行性方案、快速原型验证和迭代优化。关键在于将用户问题转化为产品价值，并通过系统化方法实现从灵感到落地的全过程。',
        tags: [DESIGN_PATTERNS, UI_UX, ALGORITHMS, DATA_STRUCTURES, FRAMEWORKS],
        content: '/blogs/2025/从日常吐槽到爆款产品，我是这样做的.md',
    },
    {
        id: '4373f75e-819d-489e-b01e-6d1427f5704f',
        url: '',
        slug: 'latest_11x_speed_boost_no_more_deepseek_lag',
        createdAt: 1740026110476,
        title: '最新！告别DeepSeek卡顿，直接提速11倍多',
        description:
            '通过优化前端性能，解决了DeepSeek卡顿问题，实现了11倍以上的速度提升。文章详细介绍了具体的优化策略，包括代码压缩、资源加载优化、缓存机制改进等，帮助开发者显著提升网页响应速度和用户体验。',
        tags: [PERFORMANCE, WEBPACK, VITE, BUILD_TOOLS, FRAMEWORKS],
        content: '/blogs/2025/最新！告别DeepSeek卡顿，直接提速11倍多.md',
    },
    {
        id: '505a2040-4c99-4cb8-ae6b-5b6761231824',
        url: '',
        slug: 'local_image_preview_trick_revealed',
        createdAt: 1739928910094,
        title: '我悟了！原来本地图片预览还能这样搞',
        description:
            '本地图片预览的实现方法通常涉及文件读取和展示技术，通过JavaScript的FileReader API可以轻松实现。用户选择图片后，FileReader读取文件并将其转换为Data URL或Blob URL，然后通过设置img标签的src属性展示预览。这种方法避免了上传到服务器的步骤，提升了用户体验。本质上是利用浏览器提供的API在前端完成文件处理，减少服务器压力并提高页面响应速度。',
        tags: [JAVASCRIPT, HTML, BROWSER_APIS],
        content: '/blogs/2025/我悟了！原来本地图片预览还能这样搞.md',
    },
    {
        id: '925a0804-d108-4dce-9dfa-bc516e9d8a0c',
        slug: 'find_your_niche_market_build_your_product',
        createdAt: 1739326626000,
        title: '找到你的小众市场，打造你的专属产品几个步骤',
        description:
            '独立开发的灵感来源多样，包括日常生活中的观察、技术社区的交流、开源项目的学习、设计趋势的追踪以及个人兴趣的驱动。通过分析这些灵感来源的本质，可以发现灵感的核心在于对问题的敏感性和创新思维的培养。开发者需要保持开放的心态，善于从不同领域汲取养分，结合自身技术能力，将灵感转化为实际项目。同时，持续学习和实践也是激发灵感的重要途径，通过不断尝试新工具、新技术，开发者能够突破思维定式，创造出更具创新性的作品。',
        tags: [SEO, UI_UX, DESIGN_PATTERNS, PERFORMANCE, RESPONSIVE_DESIGN],
        content: '/blogs/2025/找到你的小众市场，打造你的专属产品几个步骤.md',
    },
    {
        id: '3c60fa6c-8116-4b9f-9237-d34b85a7c15d',
        slug: 'independent_dev_inspiration_sources',
        createdAt: 1738721826000,
        title: '独立开发的灵感哪儿来？',
        description:
            '独立开发的灵感来源多样，包括日常生活中的观察、技术社区的交流、开源项目的学习、设计趋势的追踪以及个人兴趣的驱动。通过分析这些灵感来源的本质，可以发现灵感的核心在于对问题的敏感性和创新思维的培养。开发者需要保持开放的心态，善于从不同领域汲取养分，结合自身技术能力，将灵感转化为实际项目。同时，持续学习和实践也是激发灵感的重要途径，通过不断尝试新工具、新技术，开发者能够突破思维定式，创造出更具创新性的作品。',
        tags: [JAVASCRIPT, REACT, VUE, DESIGN_PATTERNS, UI_UX],
        content: '/blogs/2025/独立开发的灵感哪儿来？.md',
    },
    {
        id: '1e0dcf10-ab42-44b2-b0a2-43ff344575d9',
        url: '',
        slug: '2025_start_my_body_taught_me_a_lesson',
        createdAt: 1737249860893,
        title: '2025开局，我的身体给我上了一课',
        description:
            '2025年伊始，作者因身体问题经历了一次健康危机，意识到长期忽视身体健康对工作和生活的影响。通过这次经历，作者反思了前端开发者在高压工作环境下容易忽视的健康问题，强调了平衡工作与健康的重要性，并分享了一些实用的健康管理建议，如合理作息、定期锻炼和饮食调整，以帮助同行在追求职业发展的同时保持身心健康。',
        tags: [],
        content: '/blogs/2025/2025开局，我的身体给我上了一课.md',
    },
    {
        id: 'b70dae61-3a2a-41a7-b719-ee852030192f',
        slug: 'vanished_month_ai_projects_amazing',
        createdAt: 1735461621647,
        title: '消失的一个多月，我用AI做了三个项目，简直不要太爽！',
        description:
            '作者在消失的一个多月里，利用AI技术完成了三个项目，体验非常愉快。这些项目可能涉及前端开发中的自动化、智能优化或创新功能，通过AI提升了开发效率和用户体验。作者分享了使用AI工具的心得，展示了如何将AI融入前端工作流，解决复杂问题并实现高效开发。整个过程不仅节省了时间，还带来了技术上的突破和成就感，体现了AI在现代前端开发中的强大潜力。',
        tags: [JAVASCRIPT, REACT, VUE, NODEJS],
        content: '/blogs/2024/消失的一个多月，我用AI做了三个项目，简直不要太爽！.md',
    },
    {
        id: '8836d4d8-04bf-4a82-8568-ee66f85e3982',
        slug: 'frontend_image_progressive_loading',
        createdAt: 1731813969335,
        title: '前端优化图片渐进式加载',
        description:
            '前端优化图片渐进式加载的核心在于提升用户体验，通过逐步加载图片的方式，减少页面加载时间，避免用户长时间等待。文章可能介绍如何使用渐进式JPEG格式、懒加载技术、图片压缩和WebP格式等方法，来优化图片加载性能。此外，还可能探讨如何利用Intersection Observer API或滚动事件监听器，实现图片的智能加载，确保在用户可见区域内才加载图片，从而减少不必要的资源消耗。文章还可能分析不同浏览器对这些技术的支持情况，以及如何通过代码优化和性能监控工具，进一步提升图片加载效率。',
        tags: [PERFORMANCE, HTML, CSS, BROWSER_APIS, HTTP],
        content: '/blogs/2024/前端优化图片渐进式加载.md',
    },
    {
        id: 'b4bdcf90-d0a5-4ac9-97c1-480e783f68eb',
        slug: 'ios_clipboard_image_height_issue_solution',
        createdAt: 1729757315687,
        title: 'IOS剪贴板图片高度异常问题及解决方案',
        description:
            '在iOS设备上，用户从剪贴板粘贴图片到网页时，可能会遇到图片高度异常的问题。这种异常通常表现为图片的高度与实际内容不符，导致图片显示变形或不完整。问题的本质在于iOS系统在处理剪贴板数据时，可能会错误地计算图片的高度，导致前端页面无法正确渲染图片。解决方案可能包括调整CSS样式、使用JavaScript动态计算图片高度、或者通过特定的API获取剪贴板数据并手动处理图片尺寸。此外，开发者还需要考虑不同iOS版本和设备型号的兼容性问题，以确保解决方案的广泛适用性。',
        tags: [BROWSER_APIS, CSS, HTML, RESPONSIVE_DESIGN, UI_UX],
        content: '/blogs/2024/IOS剪贴板图片高度异常问题及解决方案.md',
    },
    {
        id: '691ea736-674a-4f93-bc60-60af77cd8377',
        slug: 'npm_package_development_optimization_guide',
        createdAt: 1729756995849,
        title: 'NPM包开发与优化全面指南',
        description:
            'NPM包开发与优化全面指南涵盖了从创建NPM包的基础知识到高级优化技巧的全过程。内容包括初始化NPM项目、编写模块代码、配置package.json、发布包到NPM仓库、版本管理、依赖管理、代码优化、性能测试、安全检查、持续集成与部署等。此外，还可能涉及如何处理包的依赖关系、优化包的加载速度、减少包的大小、提高包的兼容性和稳定性，以及如何通过文档和示例提高包的用户体验。指南旨在帮助开发者从零开始构建高效、可靠的NPM包，并确保其在不同环境和使用场景下的最佳表现。',
        tags: [NODEJS, BUILD_TOOLS, PERFORMANCE, CODE_QUALITY, VERSION_CONTROL],
        content: '/blogs/2024/NPM包开发与优化全面指南.md',
    },
    {
        id: 'b13fb2bf-5296-475c-b449-5a8adb6f787e',
        slug: 'Efficient_Frontend_Dev_Best_Practices_Guide',
        createdAt: 1728356973079,
        title: '高效开发最佳实践全面指南',
        description:
            '前端开发中提升效率的关键策略，涵盖了从代码优化、工具使用到团队协作的全方位最佳实践。其本质在于通过系统化的方法论和实际操作技巧，帮助开发者减少重复劳动，优化工作流程，从而在保证质量的前提下，大幅提升开发速度和项目交付效率。这些实践不仅关注技术层面的优化，还强调团队沟通与协作的重要性，确保每个成员都能在统一的标准下高效工作，最终实现项目整体效能的最大化。',
        tags: [JAVASCRIPT, REACT, VUE, PERFORMANCE, BUILD_TOOLS],
        content: '/blogs/2024/高效开发最佳实践全面指南.md',
    },
    {
        id: '6449479b-52e0-43fb-aa20-d90c571e9c04',
        slug: 'I_Stepped_Into_A_Pitfall_With_A_Recent_Requirement',
        createdAt: 1726037727909,
        title: '关于最近接到的一个需求，我......踩坑了',
        description:
            '博主在处理前端开发需求时遇到的挑战和困难。"踩坑"一词形象地表达了在开发过程中遇到的意外问题或技术障碍，通常是由于对需求理解不透彻、技术选型不当或代码实现中的疏忽所致。这类经历不仅反映了前端开发的复杂性和不确定性，也体现了开发者需要具备的快速学习和问题解决能力。通过分享这些"踩坑"经历，博主不仅帮助其他开发者避免类似错误，也展示了前端开发中不断学习和适应的重要性。',
        tags: [CODE_QUALITY, FRAMEWORKS, STATE_MANAGEMENT, BUILD_TOOLS, VERSION_CONTROL],
        content: '/blogs/2024/关于最近接到的一个需求，我......踩坑了.md',
    },
    {
        id: 'f1221fef-b48c-4e62-a716-80c8f943e71b',
        slug: 'VS_Code_Snippets_Guide_Basic_to_Advanced',
        createdAt: 1724725626848,
        title: 'VS Code 代码片段指南：从基础到高级技巧',
        description:
            '该如何在VS Code中使用代码片段，从基础设置到高级技巧，帮助开发者提高编码效率。本质上是关于通过预定义的代码模板，快速生成常用代码块，减少重复劳动，提升开发速度。内容涵盖了代码片段的创建、管理、以及如何利用变量和动态内容增强其灵活性。通过掌握这些技巧，开发者能够更专注于业务逻辑，而非重复的代码编写，从而在日常工作中实现更高的生产力。',
        tags: [JAVASCRIPT, HTML, CSS, BUILD_TOOLS, CODE_QUALITY],
        content: '/blogs/2024/VS Code 代码片段指南：从基础到高级技巧.md',
    },
    {
        id: '71fe64dd-a837-44ee-921c-e2c7ea0083fc',
        slug: 'Deep_Dive_React_Form_Control_Efficiency',
        createdAt: 1724136517768,
        title: '深入剖析 React 表单的两种控制方式，让你的代码更高效',
        description:
            'React表单处理的两种核心方式：受控组件和非受控组件。受控组件通过状态管理表单数据，确保数据与UI同步，适合复杂交互和实时验证。非受控组件依赖DOM自身管理数据，简化代码，适用于简单场景。选择合适的控制方式能提升代码效率和用户体验，关键在于平衡状态管理的复杂性与性能需求。深入理解这两种方式的本质，有助于在前端开发中做出更优的技术决策。',
        tags: [REACT, STATE_MANAGEMENT, JAVASCRIPT, PERFORMANCE, CODE_QUALITY],
        content: '/blogs/2024/深入剖析 React 表单的两种控制方式，让你的代码更高效.md',
    },
    {
        id: '9e31a831-0c85-4d4a-8d46-2eabe17b602e',
        slug: 'Avoid_JavaScript_Type_Detection_Pitfalls',
        createdAt: 1723425510566,
        title: '别再被坑了!JavaScript类型检测的最佳实践',
        description:
            'JavaScript开发中常见的类型检测问题，强调了掌握最佳实践的重要性。本质在于，JavaScript的动态类型特性使得类型检测成为开发中的关键环节，错误的类型检测可能导致难以追踪的bug。最佳实践包括使用typeof、instanceof、以及更现代的工具如TypeScript的类型系统，来确保代码的健壮性和可维护性。通过这些方法，开发者可以避免常见的类型错误，提升代码质量和开发效率。',
        tags: [JAVASCRIPT, TYPESCRIPT, CODE_QUALITY, DESIGN_PATTERNS, BROWSER_APIS],
        content: '/blogs/2024/别再被坑了!JavaScript类型检测的最佳实践.md',
    },
    {
        id: 'e1e5ea3e-72ca-4901-8b27-14e078e438cd',
        slug: 'Next_js_App_Router_Future_Pages_Router_Still_Important',
        createdAt: 1722496379266,
        title: 'Next.js 路由革命：为什么 App Router 可能是未来，但 Pages Router 仍然重要',
        description:
            'Next.js的App Router和Pages Router代表了前端路由的两种不同范式。App Router通过组件化的方式简化了路由配置，使得代码更加模块化和易于维护，这可能是未来前端开发的趋势。然而，Pages Router基于文件系统的路由机制仍然具有重要意义，特别是在需要快速迭代和简单项目中，它的直观性和易用性使其难以被完全取代。两者各有优势，开发者应根据项目需求和团队习惯选择合适的路由策略。',
        tags: [NEXTJS, REACT, FRAMEWORKS, STATE_MANAGEMENT, BUILD_TOOLS],
        content: '/blogs/2024/Next.js 路由革命：为什么 App Router 可能是未来，但 Pages Router 仍然重要.md',
    },
    {
        id: 'fa467543-420d-495a-a5c6-c2d41a203402',
        slug: 'Boost_Repo_Efficiency_300_Percent_With_CLI_Tool',
        createdAt: 1719367412621,
        title: '你还在手动操作仓库？这款 CLI 工具让你效率飙升300%！',
        description:
            '现代前端开发中手动操作仓库的低效问题，并强调了一款CLI工具如何通过自动化和优化流程，显著提升开发者的效率。手动操作仓库不仅耗时，还容易出错，而这款工具通过简化操作、减少重复性工作，使开发者能够更专注于核心任务，从而实现效率的飞跃。这种工具的本质在于利用技术手段减少人为干预，提高工作流程的自动化程度，是现代开发工具发展趋势的体现。',
        tags: [GIT, VERSION_CONTROL, DEVOPS, CI_CD, BUILD_TOOLS],
        content: '/blogs/2024/你还在手动操作仓库？这款 CLI 工具让你效率飙升300%！.md',
    },
    {
        id: 'abf07d89-972e-4f94-91b2-3d1789de2920',
        slug: 'Team_Lead_React_Next_Project_Template_Request',
        createdAt: 1718246840741,
        title: '组长：你了解过React，开发个Next项目模板吧，我：怎么扯上关系的？',
        description:
            '标题反映了前端开发中常见的任务分配与技术选择问题。组长要求开发一个基于Next.js的项目模板，而提问者对React有所了解，但对Next.js与React的关系感到困惑。本质上，Next.js是基于React的框架，提供了服务器端渲染、静态站点生成等功能，简化了React应用的开发和部署。组长的要求意味着需要利用React的知识来构建一个更高效、更优化的前端项目模板。这个任务不仅考验对React的理解，还需要掌握Next.js的特性，以便在实际项目中实现更好的性能和用户体验。',
        tags: [REACT, NEXTJS, FRAMEWORKS, STATE_MANAGEMENT, BUILD_TOOLS],
        content: '/blogs/2024/组长：你了解过React，开发个Next项目模板吧，我：怎么扯上关系的？.md',
    },
    {
        id: 'b62bbad5-1ed5-4eec-9293-a4761145dd96',
        slug: 'explore_english_like_gaming',
        createdAt: 1717382321453,
        title: '爆爽，英语小白怒刷 50 课！像玩游戏一样学习英语~',
        description:
            '一种通过游戏化学习方法提升英语水平的新途径。它强调了即使是英语基础薄弱的学习者，也能通过这种有趣且互动性强的学习方式快速进步。标题中的“爆爽”和“像玩游戏一样”突出了学习过程的愉悦感和吸引力，而“怒刷50课”则表明了学习者在这种模式下能够高效地完成大量课程。整体而言，标题传达了游戏化学习在英语教育中的潜力，即通过创造积极的学习体验来激发学习者的兴趣和动力，从而实现更有效的语言习得。',
        tags: [UI_UX, ANIMATION],
        content: '/blogs/2024/爆爽，英语小白怒刷 50 课！像玩游戏一样学习英语~.md',
    },
    {
        id: '2a5bd721-c8ea-4fcf-9a15-cd3c11408f18',
        slug: 'JavaScript_Event_Loop_Exploration',
        createdAt: 1717382321409,
        title: 'JavaScript 事件循环竟还能这样玩!!!',
        description:
            'JavaScript事件循环机制是单线程语言的核心，通过任务队列和微任务队列的巧妙设计，实现了非阻塞的异步操作。本质上是将同步任务和异步任务分离，确保主线程不被长时间阻塞，从而提高应用的响应速度。事件循环通过不断检查任务队列，优先执行微任务，再处理宏任务，保证了异步任务的顺序执行。这种机制使得JavaScript能够在浏览器环境中高效处理用户交互、网络请求等异步操作，是现代前端开发不可或缺的基础。',
        tags: [JAVASCRIPT, BROWSER_APIS, PERFORMANCE, ALGORITHMS, DATA_STRUCTURES],
        content: '/blogs/2024/JavaScript 事件循环竟还能这样玩!!!.md',
    },
    {
        id: 'bc375f73-9039-4bda-a450-d6fbb24f89f6',
        slug: 'Avoid_WeChat_H5_Sharing_Pitfalls',
        createdAt: 1711939845151,
        title: '你一定要避坑： 关于微信H5分享，你不要再踩坑了！！！',
        description:
            '微信H5分享的坑主要集中在API调用、权限配置和用户体验上。开发者需确保正确配置微信JS-SDK，避免因签名错误或权限不足导致分享失败。同时，分享内容的预览图、标题和描述需精心设计，以提升用户点击率。此外，微信的分享机制会根据用户行为动态调整，开发者需持续关注微信官方更新，及时调整策略，避免因平台规则变化而影响分享效果。总之，微信H5分享的成功不仅依赖于技术实现，更需结合用户体验和平台规则进行综合优化。',
        tags: [BROWSER_APIS, HTML, CSS, JAVASCRIPT, SEO],
        content: '/blogs/2024/你一定要避坑： 关于微信H5分享，你不要再踩坑了！！！.md',
    },
    {
        id: '3c6cec0f-b4e7-412f-90a1-516d9241b34b',
        slug: 'Deep_Dive_Bitwise_Operators_JavaScript',
        createdAt: 1710311213634,
        title: '深入理解位运算符及其在JavaScript中的应用',
        description:
            '位运算符在JavaScript中通过直接操作二进制位来实现高效的数值计算和逻辑操作。它们包括按位与（&）、按位或（|）、按位异或（^）、按位非（~）、左移（<<）和右移（>>）等。这些运算符在处理整数时尤为强大，能够快速执行位级别的操作，如掩码、位标志和位移。深入理解位运算符的本质在于掌握其二进制操作机制，以及如何在实际编程中利用这些机制来优化性能和简化代码。例如，位运算符常用于权限控制、状态管理等场景，通过位操作可以实现高效的数据处理和存储。',
        tags: [JAVASCRIPT, ALGORITHMS, DATA_STRUCTURES, BROWSER_APIS, PERFORMANCE],
        content: '/blogs/2024/深入理解位运算符及其在JavaScript中的应用.md',
    },
    {
        id: '268e7d06-e7e6-4498-bb7d-9e706277c9a7',
        slug: 'Interviewer_Strategy_Pattern_Used_No',
        createdAt: 1708910152153,
        title: '面试官：策略模式有使用过吗？我：没有......',
        description:
            '面试中常见的技术问题与候选人的实际经验之间的差距。策略模式是一种设计模式，用于在运行时选择算法或行为，使代码更具灵活性和可维护性。面试官询问候选人是否使用过策略模式，候选人回答没有，这可能表明候选人在实际项目中缺乏对高级设计模式的应用经验。这种情况在技术面试中很常见，反映了候选人的技术深度和广度。面试官通过此类问题评估候选人的设计能力、解决问题的思维方式以及对软件工程原则的理解。候选人若能展示对策略模式的理解，即使没有实际使用经验，也能体现其学习能力和对技术的敏感度。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS],
        content: '/blogs/2023/面试官：策略模式有使用过吗？我：没有.......md',
    },
    {
        id: '7e61ad4d-2ddc-48f5-a486-4dc0d5630856',
        slug: 'Ultimate_Guide_14_Design_Patterns_60k_Words',
        createdAt: 1708910152142,
        title: '超全60000多字详解 14 种设计模式 (多图+代码+总结+Demo)',
        description:
            '一篇深入探讨设计模式的博客，内容涵盖了14种设计模式的详细解析，总字数超过60000字。通过多图、代码示例、总结和Demo，文章旨在全面解析每种设计模式的本质、应用场景及其在实际开发中的作用。设计模式作为软件工程中的经典解决方案，帮助开发者解决常见问题，提高代码的可维护性和可扩展性。文章通过丰富的实例和详细的讲解，帮助读者深入理解设计模式的原理，掌握其在实际项目中的应用技巧，从而提升前端开发的效率和质量。',
        tags: [DESIGN_PATTERNS, JAVASCRIPT, FRAMEWORKS, STATE_MANAGEMENT, BUILD_TOOLS],
        content: '/blogs/2023/超全60000多字详解 14 种设计模式 (多图+代码+总结+Demo).md',
    },
    {
        id: '6a4ba90c-3bdc-4d69-a414-177a274feac1',
        slug: 'Understanding_CSS_Selector_Specificity',
        createdAt: 1708910152142,
        title: '这是你理解的CSS选择器权重吗？',
        description:
            'CSS选择器权重决定了当多个选择器应用于同一元素时，哪个样式规则优先应用。权重由选择器的类型和数量决定，具体为内联样式（1000）、ID选择器（100）、类选择器和属性选择器（10）、元素选择器和伪元素选择器（1）。权重越高，优先级越高。理解权重有助于避免样式冲突，确保样式按预期应用。',
        tags: [CSS, HTML, RESPONSIVE_DESIGN, UI_UX, CODE_QUALITY],
        content: '/blogs/2023/这是你理解的CSS选择器权重吗？.md',
    },
    {
        id: '64b60c40-ab0e-4786-be14-95ff4e98780a',
        slug: 'Ultimate_Secret_Break_No_Code_State',
        createdAt: 1708910152133,
        title: '终极秘诀：打破无代码状态的小方法',
        description:
            '在无代码开发环境中突破瓶颈的关键策略，即通过探索和应用一些小技巧来提升效率和创造力。无代码平台虽然简化了开发流程，但有时会限制用户的创新能力。因此，掌握这些“小方法”意味着用户能够更灵活地应对复杂需求，优化工作流程，甚至在无代码框架内实现原本需要编码才能完成的功能。这些秘诀可能涉及利用平台的隐藏功能、结合外部工具、或者通过巧妙的数据处理来实现更高级的功能。总之，这些方法帮助用户在无代码环境中找到新的突破口，提升整体开发体验。',
        tags: [STATE_MANAGEMENT, JAVASCRIPT, REACT, VUE, PERFORMANCE],
        content: '/blogs/2023/终极秘诀：打破无代码状态的小方法.md',
    },
    {
        id: 'f6bde2b1-f86c-438f-93c3-f88db0b1771f',
        slug: 'Theory_Practice_Prototype_Inheritance_Object_Mastery_Part_2',
        createdAt: 1708910152129,
        title: '理论+实践：从原型链到继承模式，掌握 Object 的精髓(二)',
        description:
            '该JavaScript中对象的核心概念，特别是原型链和继承模式。原型链是JavaScript实现继承的基础，通过对象的原型属性（__proto__）链接到其他对象，形成一个链条，使得对象可以共享属性和方法。继承模式则是通过原型链机制，实现类与对象之间的继承关系，从而提高代码的复用性和可维护性。掌握这些概念，能够深入理解JavaScript对象的本质，提升编程能力，有效解决复杂问题。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS, DATA_STRUCTURES, ALGORITHMS, STATE_MANAGEMENT],
        content: '/blogs/2023/理论+实践：从原型链到继承模式，掌握 Object 的精髓(二).md',
    },
    {
        id: '52319ea5-eab7-40a4-8363-132c994f574c',
        slug: 'Hot_Interview_Questions_Process_Related',
        createdAt: 1708910152128,
        title: '热点面试题：进程相关问题？',
        description:
            '进程相关问题是前端面试中的热点话题，主要涉及浏览器多进程架构、渲染进程、插件进程等。其本质在于理解现代浏览器如何通过多进程设计提升性能和安全性，避免单个页面的崩溃影响整个浏览器。面试中常问的进程间通信、资源共享、安全沙箱机制等，都是为了考察候选人对浏览器工作原理的深入理解。掌握这些知识不仅能应对面试，还能在实际开发中优化前端性能和用户体验。',
        tags: [NODEJS, HTTP, BROWSER_APIS, ALGORITHMS, DATA_STRUCTURES],
        content: '/blogs/2023/热点面试题：进程相关问题？.md',
    },
    {
        id: 'dca56e52-ad9f-4da5-b6b7-2ba4cfd39998',
        slug: 'Theory_Practice_Prototype_Inheritance_Object_Essence_Part1',
        createdAt: 1708910152128,
        title: '理论+实践：从原型链到继承模式，掌握 Object 的精髓(一)',
        description:
            '该前端开发中JavaScript对象的核心概念，特别是原型链和继承模式。原型链是JavaScript实现继承的基础，通过对象间的原型链接，实现属性和方法的共享与继承。继承模式则是开发者根据具体需求，选择合适的继承方式来构建对象层次结构。掌握这些概念不仅能深入理解JavaScript的面向对象编程特性，还能在实际开发中灵活运用，优化代码结构，提升开发效率。通过理论与实践的结合，开发者能够更全面地掌握Object的精髓，为复杂应用的构建打下坚实基础。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS, DATA_STRUCTURES, ALGORITHMS, STATE_MANAGEMENT],
        content: '/blogs/2023/理论+实践：从原型链到继承模式，掌握 Object 的精髓(一).md',
    },
    {
        id: 'b8405a0b-46a0-4dec-828b-e024695da81d',
        slug: 'Arrow_Functions_vs_Regular_Functions',
        createdAt: 1708910152127,
        title: '热点面试题：箭头函数与普通函数的区别？',
        description:
            '箭头函数与普通函数的主要区别在于this的指向和语法简洁性。箭头函数没有自己的this，它会捕获其所在上下文的this值，适合用于回调函数和需要保持上下文一致性的场景。普通函数有独立的this，其值取决于调用方式，适合需要动态上下文的场景。此外，箭头函数不能作为构造函数使用，没有arguments对象，语法更简洁，适合编写简短的函数表达式。',
        tags: [JAVASCRIPT, ALGORITHMS, DESIGN_PATTERNS],
        content: '/blogs/2023/热点面试题：箭头函数与普通函数的区别？.md',
    },
    {
        id: 'b0998092-a4fc-4ce2-bab6-adb65f45a674',
        slug: 'Hot_Interview_Questions_Understanding_this',
        createdAt: 1708910152127,
        title: '热点面试题：聊聊对 this 的理解？',
        description:
            '"this"关键字在JavaScript中是一个动态上下文指针，其值取决于函数的调用方式。本质上，"this"指向调用该函数的对象。在全局作用域中，"this"指向全局对象（如浏览器中的window）。在对象方法中，"this"指向调用该方法的对象。在构造函数中，"this"指向新创建的实例。通过call、apply和bind方法，可以显式地绑定"this"的值。理解"this"的动态绑定机制是掌握JavaScript面向对象编程和函数式编程的关键。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS, STATE_MANAGEMENT, CODE_QUALITY, ALGORITHMS],
        content: '/blogs/2023/热点面试题：聊聊对 this 的理解？.md',
    },
    {
        id: '10258456-5b52-4dd5-9cda-6b132ad7035f',
        slug: 'Hot_Interview_Questions_Macro_Micro_Tasks_Browser_Node',
        createdAt: 1708910152126,
        title: '热点面试题：浏览器和Node.js的宏任务和微任务',
        description:
            '浏览器和Node.js中的宏任务和微任务是异步编程的核心概念。宏任务通常包括整体代码块、setTimeout、setInterval等，它们在事件循环的下一轮执行。微任务则包括Promise的回调、process.nextTick等，它们在当前任务完成后立即执行，确保在宏任务之前处理。理解这两者的区别和执行顺序，有助于优化异步代码的性能和避免潜在的并发问题。',
        tags: [JAVASCRIPT, NODEJS, BROWSER_APIS, HTTP, STATE_MANAGEMENT],
        content: '/blogs/2023/热点面试题：浏览器和Node.js的宏任务和微任务.md',
    },
    {
        id: 'f2731064-9325-42c2-81e5-b7b81002a49d',
        slug: 'Hotspot_Interview_HTTP3_to_HTTP1_Improvements',
        createdAt: 1708910152126,
        title: '热点面试题：简述 http3.0~http1.0 分别有什么改进？',
        description:
            'HTTP协议从1.0到3.0的演进反映了网络技术的不断进步。HTTP/1.0引入了持久连接和缓存机制，但每个请求仍需单独建立连接。HTTP/1.1通过持久连接和流水线技术提升了性能，但仍存在队头阻塞问题。HTTP/2采用多路复用和头部压缩，显著减少了延迟。HTTP/3基于QUIC协议，解决了TCP的队头阻塞问题，并提供了更快的连接建立和更强的安全性。总体而言，这些改进的核心在于优化传输效率、减少延迟和提升安全性，以适应现代网络应用的高性能需求。',
        tags: [HTTP, BROWSER_APIS, PERFORMANCE, SECURITY, SEO],
        content: '/blogs/2023/热点面试题：简述 http3.0~http1.0 分别有什么改进？.md',
    },
    {
        id: '65df0cff-6a80-460f-a888-577f3b4df5b2',
        slug: 'Hot_Interview_Bitwise_Operations',
        createdAt: 1708910152125,
        title: '热点面试题：常用位运算方法？',
        description:
            '位运算方法是计算机科学中处理二进制数据的基础，通过直接操作整数的二进制位来实现高效的数据处理。常用位运算包括与（&）、或（|）、异或（^）、取反（~）、左移（<<）和右移（>>）。这些运算在优化算法、处理权限控制、数据压缩等方面有广泛应用。与运算用于判断特定位是否为1，或运算用于合并位信息，异或运算用于交换值和检测变化，取反运算用于反转位状态，左移和右移用于快速乘除2的幂。掌握这些运算的本质能提升代码效率和理解底层机制。',
        tags: [JAVASCRIPT, ALGORITHMS, DATA_STRUCTURES],
        content: '/blogs/2023/热点面试题：常用位运算方法？.md',
    },
    {
        id: '384a9479-b6b7-4cb4-b2f2-1739931c8304',
        slug: 'hot_interview_common_http_codes',
        createdAt: 1708910152125,
        title: '热点面试题：常见的http code 及含义？',
        description:
            'HTTP状态码是服务器对客户端请求的响应，常见的有200（成功）、404（未找到）、500（服务器错误）等。这些代码帮助开发者快速定位问题，如200表示请求成功，404表示资源不存在，500表示服务器内部错误。理解这些状态码的本质在于它们提供了一种标准化的方式来传达请求的处理结果，减少了沟通成本，提高了开发效率。通过状态码，开发者可以迅速判断请求是否成功，以及在失败时了解失败的原因，从而进行相应的调试和优化。',
        tags: [HTTP],
        content: '/blogs/2023/热点面试题：常见的http code 及含义？.md',
    },
    {
        id: '75a54ef4-b527-42f5-9570-603c963487ef',
        slug: 'Hot_Interview_Questions_Console_Log_Sync_Async',
        createdAt: 1708910152124,
        title: '热点面试题：console.log()同异步问题？',
        description:
            '在JavaScript中，console.log()是同步操作，但它可能表现出异步行为的原因在于浏览器的渲染机制和事件循环。当console.log()执行时，它立即将数据输出到控制台，但控制台的更新可能被延迟，尤其是在复杂的DOM操作或大量数据输出时。此外，异步操作如setTimeout或Promise的回调会在事件循环的后续阶段执行，导致console.log()在这些异步操作中的输出顺序可能与代码顺序不一致。理解这一点有助于开发者正确调试和分析代码执行顺序，避免因误解console.log()的同步特性而导致的错误。',
        tags: [JAVASCRIPT, BROWSER_APIS, HTTP, ALGORITHMS, DATA_STRUCTURES],
        content: '/blogs/2023/热点面试题：console.log()同异步问题？.md',
    },
    {
        id: '45b9bf26-f697-4611-935a-4b0dc9f6987e',
        slug: 'Hot_Interview_Question_Half_Package_Solution',
        createdAt: 1708910152124,
        title: '热点面试题：半包问题，该如何解决？',
        description:
            '半包问题在前端开发中通常指的是HTTP请求中服务器只返回部分数据的情况，常见于大文件下载或流式传输。解决这一问题的本质在于优化数据传输机制，确保客户端能够正确接收并处理不完整的数据包。常见方法包括使用分块传输编码（Chunked Transfer Encoding）、设置合理的超时时间和重试机制、以及在前端代码中处理数据包的拼接和校验。此外，利用WebSocket等长连接技术也能有效避免半包问题，确保数据传输的完整性和实时性。',
        tags: [JAVASCRIPT, HTTP, BROWSER_APIS, STATE_MANAGEMENT, SECURITY],
        content: '/blogs/2023/热点面试题：半包问题，该如何解决？.md',
    },
    {
        id: 'aec80d6a-eb81-48c4-9a78-017d0fc93b33',
        slug: 'Hot_Interview_Questions_Cache_Control_Difference',
        createdAt: 1708910152124,
        title: '热点面试题：协商缓存和强缓存的理解及区别？',
        description:
            '协商缓存和强缓存是前端性能优化的关键策略。强缓存通过设置HTTP头（如Cache-Control和Expires）直接告诉浏览器使用本地缓存，无需请求服务器，适用于不常变动的资源。协商缓存则通过ETag和Last-Modified头与服务器验证资源是否更新，仅在资源变化时返回新内容，减少不必要的数据传输。两者结合使用，既能提高加载速度，又能确保资源的新鲜度，本质上是平衡用户体验和数据一致性的策略。',
        tags: [HTTP, PERFORMANCE],
        content: '/blogs/2023/热点面试题：协商缓存和强缓存的理解及区别？.md',
    },
    {
        id: '682c05b1-e4ad-4b3f-9b53-98fdc0190a66',
        slug: 'Hot_Interview_Questions_Virtual_DOM',
        createdAt: 1708910152123,
        title: '热点面试题：Virtual DOM相关知识点问题？',
        description:
            'Virtual DOM本质上是前端框架（如React、Vue）中用于优化DOM操作效率的一种技术。它通过在内存中构建一个轻量级的虚拟DOM树，将实际DOM的更新操作最小化，从而提升性能。虚拟DOM的核心在于其高效的diff算法，能够精确识别出需要更新的部分，避免不必要的重绘和回流。这种机制不仅简化了开发者的工作，还显著提高了应用的响应速度和用户体验。',
        tags: [JAVASCRIPT, REACT, VUE, STATE_MANAGEMENT, FRAMEWORKS],
        content: '/blogs/2023/热点面试题：Virtual DOM相关知识点问题？.md',
    },
    {
        id: '3ba117ff-223d-4f80-90f3-6d4b5c4b0cc8',
        slug: 'Hot_Interview_Vue2_3_Lifecycle_Roles',
        createdAt: 1708910152123,
        title: '热点面试题：Vue2、3 生命周期及作用？',
        description:
            'Vue2和Vue3的生命周期是组件从创建到销毁过程中的一系列钩子函数，它们允许开发者在特定阶段执行自定义逻辑。Vue2的生命周期包括beforeCreate、created、beforeMount、mounted等，而Vue3引入了setup函数，简化了生命周期钩子的使用。生命周期的本质是提供了一种机制，让开发者能够在组件的不同阶段介入和控制组件的行为，从而实现更灵活和高效的开发。理解这些生命周期的作用和时机，有助于优化组件性能和提升开发效率。',
        tags: [VUE, STATE_MANAGEMENT, FRAMEWORKS],
        content: '/blogs/2023/热点面试题：Vue2、3 生命周期及作用？.md',
    },
    {
        id: '663599a2-b616-466a-b2fb-7cda2bc59d87',
        slug: 'Hot_Interview_Nodejs_Garbage_Collection',
        createdAt: 1708910152122,
        title: '热点面试题：Node.js 中的垃圾回收机制？',
        description:
            'Node.js中的垃圾回收机制本质上是自动内存管理的一部分，通过V8引擎实现。它通过标记-清除算法识别并回收不再使用的内存，确保内存高效利用。垃圾回收的核心在于识别和释放不再被引用的对象，避免内存泄漏。这一机制在后台自动运行，开发者无需手动干预，但了解其工作原理有助于优化性能和避免潜在问题。',
        tags: [NODEJS, JAVASCRIPT, PERFORMANCE, ALGORITHMS, DATA_STRUCTURES],
        content: '/blogs/2023/热点面试题：Node.js 中的垃圾回收机制？.md',
    },
    {
        id: '2892234f-332e-41b7-a7fb-2647d40a2989',
        slug: 'Hot_Interview_QuickSort',
        createdAt: 1708910152122,
        title: '热点面试题：QuickSort',
        description:
            'QuickSort是一种高效的排序算法，其本质在于分治策略。通过选择一个基准元素，将数组分为两部分，一部分小于基准，另一部分大于基准，然后递归地对这两部分进行排序。这种分而治之的方法使得QuickSort在平均情况下具有O(n log n)的时间复杂度，且在原地排序，空间复杂度为O(log n)。尽管在最坏情况下可能退化为O(n^2)，但通过优化选择基准元素的方法，如三数取中或随机选择，可以显著降低这种风险。因此，QuickSort在实际应用中被广泛使用，尤其是在需要高效排序且内存占用有限的情况下。',
        tags: [ALGORITHMS, DATA_STRUCTURES],
        content: '/blogs/2023/热点面试题：QuickSort.md',
    },
    {
        id: '14550fe5-90fa-4bc0-9743-d71b4bb9cd22',
        slug: 'Hotspot_Interview_JS_Check_Element_In_Viewport',
        createdAt: 1708910152121,
        title: '热点面试题：JS如何判断一个元素是否在可视区域内？',
        description:
            '在JavaScript中判断一个元素是否在可视区域内，本质上是计算该元素相对于视口的位置。通过获取元素的边界信息（如offsetTop、clientHeight等），结合视口的高度（window.innerHeight），可以确定元素是否部分或完全可见。核心在于比较元素的顶部和底部位置与视口的顶部和底部位置的关系。若元素的顶部在视口底部之上且底部在视口顶部之下，则元素在可视区域内。此方法常用于实现懒加载、无限滚动等交互效果。',
        tags: [JAVASCRIPT, BROWSER_APIS, PERFORMANCE, HTML, CSS],
        content: '/blogs/2023/热点面试题：JS如何判断一个元素是否在可视区域内？.md',
    },
    {
        id: '60a0e8e3-6470-4766-9619-80eb12bf087a',
        slug: 'hot_interview_js_call_apply_bind_concept_usage_difference_implementation',
        createdAt: 1708910152120,
        title: '热点面试题：JS 中 call, apply, bind 概念、用法、区别及实现？',
        description:
            '在JavaScript中，call、apply和bind是用于控制函数执行上下文（this值）的方法。call和apply立即调用函数，区别在于参数传递方式：call逐个传递，apply数组传递。bind则返回一个新函数，延迟执行，预设this值和部分参数。三者本质都是改变函数内部this指向，实现代码复用和灵活性。理解它们有助于掌握JavaScript函数式编程的核心概念。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS, ALGORITHMS, BROWSER_APIS, STATE_MANAGEMENT],
        content: '/blogs/2023/热点面试题：JS 中 call, apply, bind 概念、用法、区别及实现？.md',
    },
    {
        id: 'ad591d85-3daa-4661-8604-7bf8dae8f39a',
        slug: 'Hot_Interview_Questions_JS_Variable_Hoisting_Issues',
        createdAt: 1708910152120,
        title: '热点面试题：JS为什么会变量提升，会导致那些问题？',
        description:
            '变量提升是JavaScript中的一种特性，本质上是由于JavaScript在执行代码前会进行一次预解析，将变量和函数的声明提升到作用域的顶部。这种机制虽然简化了代码编写，但也可能导致一些问题，如变量未定义错误、逻辑混乱等。开发者在使用变量时需注意其作用域和生命周期，避免因变量提升而引发的意外行为。理解变量提升的本质有助于编写更清晰、可维护的代码。',
        tags: [JAVASCRIPT, ALGORITHMS, DATA_STRUCTURES, BROWSER_APIS, CODE_QUALITY],
        content: '/blogs/2023/热点面试题：JS为什么会变量提升，会导致那些问题？.md',
    },
    {
        id: 'aef2cd79-8dc7-4983-886c-3e296e36778a',
        slug: 'Hot_Interview_Array_Non_Destructive_Methods',
        createdAt: 1708910152119,
        title: '热点面试题： Array中有哪些非破坏性方法？',
        description:
            '非破坏性方法是指在操作数组时不会改变原数组的方法，如map、filter、concat等。这些方法通过返回新数组来实现功能，保持了原数组的完整性，便于在复杂逻辑中进行链式操作和数据追踪。非破坏性方法的本质在于它们提供了一种安全、可预测的方式来处理数据，避免了因直接修改原数组而引发的潜在错误和副作用，是现代前端开发中处理数据的重要工具。',
        tags: [JAVASCRIPT, ALGORITHMS, DATA_STRUCTURES, BROWSER_APIS],
        content: '/blogs/2023/热点面试题： Array中有哪些非破坏性方法？.md',
    },
    {
        id: 'caa6d0cd-3486-4b37-89dc-b1379bb98d33',
        slug: 'Hot_Interview_Question_0_1_plus_0_2_not_0_3',
        createdAt: 1708910152119,
        title: '热点面试题： 为什么 0.1+0.2 != 0.3， 如何让其相等',
        description:
            'JavaScript中浮点数运算的常见问题。0.1和0.2在二进制表示中是无限循环小数，计算机存储时会截断，导致精度丢失，因此0.1+0.2并不精确等于0.3。解决方法包括使用整数运算、第三方库如Big.js或bignumber.js，或设置误差范围判断相等。本质是二进制浮点数表示法无法精确表示某些十进制小数，需通过特定手段处理精度问题。',
        tags: [JAVASCRIPT, ALGORITHMS, DATA_STRUCTURES, BROWSER_APIS, HTTP],
        content: '/blogs/2023/热点面试题： 为什么 0.1+0.2 != 0.3， 如何让其相等.md',
    },
    {
        id: '59fa974c-a889-478e-a375-83697cd8b533',
        slug: 'Deep_Dive_JavaScript_Type_Conversion',
        createdAt: 1708910152118,
        title: '深度剖析之由浅入深揭秘JavaScript类型转换(最全总结篇)',
        description:
            '该JavaScript中类型转换的复杂性，本质上是解析JavaScript如何处理不同数据类型之间的转换。JavaScript的类型转换机制涉及隐式和显式转换，这些转换在代码执行过程中自动发生，影响变量的值和行为。隐式转换常发生在算术运算、比较操作和函数调用中，而显式转换则通过内置函数如`Number()`、`String()`和`Boolean()`来实现。理解这些转换规则对于编写健壮、无误的代码至关重要，因为错误的类型转换可能导致难以调试的错误。总结来说，该标题旨在通过深入分析JavaScript的类型转换机制，帮助开发者掌握其核心原理，从而提升代码质量和可维护性。',
        tags: [JAVASCRIPT, ALGORITHMS, DATA_STRUCTURES, BROWSER_APIS, CODE_QUALITY],
        content: '/blogs/2023/深度剖析之由浅入深揭秘JavaScript类型转换(最全总结篇).md',
    },
    {
        id: 'de839e0f-430a-42c5-bc10-0d99157a5b00',
        slug: 'Hot_Frontend_Interview_Questions_Yesterday',
        createdAt: 1708910152118,
        title: '热乎的前端面试题（昨天）',
        description:
            '前端面试题的时效性和热度，强调了面试题的更新速度和紧跟技术趋势的重要性。它暗示了前端开发者需要不断学习新知识，以应对快速变化的技术环境。同时，标题中的“昨天”一词突出了信息的即时性，提醒读者关注最新的技术动态和面试要求，避免使用过时的知识。这种标题反映了前端领域的竞争激烈和技术迭代迅速，要求从业者保持敏锐的洞察力和持续学习的态度。',
        tags: [JAVASCRIPT, REACT, VUE, HTML, CSS],
        content: '/blogs/2023/热乎的前端面试题（昨天）.md',
    },
    {
        id: '2e7bef3a-d117-4acd-85ff-338eb9119e7c',
        slug: 'Exploring_JavaScript_Frontend_Hot_Interview_Questions_3',
        createdAt: 1708910152117,
        title: '探究JavaScript前端热点面试题(三)：让你在面试中游刃有余！',
        description:
            '该JavaScript前端面试中的热点问题，旨在帮助读者在面试中表现出色。其本质是通过解析常见且关键的面试题目，揭示前端开发的核心知识和技能，如JavaScript语言特性、异步编程、性能优化等。通过深入理解这些热点问题，读者不仅能提升技术水平，还能在面试中展现自信和专业性，从而增加成功的机会。总结来说，该内容强调了通过掌握面试热点问题来提升前端开发能力和面试表现的重要性。',
        tags: [JAVASCRIPT, REACT, VUE, STATE_MANAGEMENT, TESTING],
        content: '/blogs/2023/探究JavaScript前端热点面试题(三)：让你在面试中游刃有余！.md',
    },
    {
        id: 'd2bbf3e4-b745-4f3d-b4a6-99f137c2fb32',
        slug: 'Hand_Coding_Series_Part_2',
        createdAt: 1708910152116,
        title: '手撕代码系列(二)',
        description:
            '"手撕代码系列(二)"这个标题暗示了博客内容将深入探讨前端开发中的代码实现细节。通过"手撕"这一形象的表达，作者强调了对代码的深入理解和手动实现的重要性，而非仅仅依赖框架或库。这种做法有助于提升开发者的编程技能和对底层原理的掌握。"系列(二)"表明这是一个持续更新的系列文章，每篇都聚焦于不同的代码实现或技术难点。整体而言，这个标题反映了博客内容将注重实践和深度，旨在帮助读者通过手动编写代码来加深对前端技术的理解。',
        tags: [JAVASCRIPT, ALGORITHMS, DATA_STRUCTURES, CODE_QUALITY, DESIGN_PATTERNS],
        content: '/blogs/2023/手撕代码系列(二).md',
    },
    {
        id: '0688f2c7-321e-4569-99ca-70e63ed8e2f7',
        slug: 'Hand_Coding_Series_Part_4',
        createdAt: 1708910152116,
        title: '手撕代码系列(四)',
        description:
            '"手撕代码系列(四)"这个标题暗示了博客内容将深入探讨前端开发中的代码实现细节。"手撕"一词通常用于形容对代码进行深入剖析和手动实现，而非简单地调用库或框架。"系列"表明这是一个持续的系列文章，每篇都聚焦于不同的代码实现或技术点。"四"则指这是该系列的第四篇文章。综合来看，该标题传达了作者将通过具体代码示例，详细讲解前端开发中的某个技术或功能实现，强调手动编写和理解代码的重要性，而非依赖现成的解决方案。这种深入剖析有助于读者更好地掌握前端开发的底层原理和技巧。',
        tags: [ALGORITHMS, DATA_STRUCTURES, JAVASCRIPT, REACT, VUE],
        content: '/blogs/2023/手撕代码系列(四).md',
    },
    {
        id: '29134cf0-f57d-456e-a5b3-6c8f53909aa2',
        slug: 'Hand_Coding_Series_1',
        createdAt: 1708910152115,
        title: '手撕代码系列(一)',
        description:
            '"手撕代码系列(一)"这个标题暗示了博客内容将深入探讨前端代码的实现细节。它强调通过手动编写代码来理解和掌握前端技术，而非仅仅依赖框架或库。这种做法有助于开发者深入理解代码背后的逻辑和原理，提升编程技能。通过"手撕"这一动作，作者可能希望传达一种亲自动手、深入实践的学习态度，鼓励读者在实践中发现问题、解决问题，从而达到更高的技术水平。这种学习方式不仅有助于记忆和理解，还能培养独立思考和解决问题的能力。',
        tags: [JAVASCRIPT, ALGORITHMS, DATA_STRUCTURES, CODE_QUALITY, DESIGN_PATTERNS],
        content: '/blogs/2023/手撕代码系列(一).md',
    },
    {
        id: 'c59d105c-0c8f-4a6f-8c06-c533c91d4e94',
        slug: 'Hand_Coding_Series_Part_3',
        createdAt: 1708910152115,
        title: '手撕代码系列(三)',
        description:
            '通过手动编写和理解代码来提升技术深度。文章可能涉及复杂的算法、数据结构或框架内部机制，旨在帮助读者通过实际操作掌握核心概念，而非仅仅依赖现成的工具或库。这种手撕代码的方式有助于开发者理解代码背后的逻辑和原理，提升解决问题的能力，同时也体现了对技术细节的严谨追求和对编程艺术的尊重。',
        tags: [ALGORITHMS, DATA_STRUCTURES, JAVASCRIPT, CODE_QUALITY, DESIGN_PATTERNS],
        content: '/blogs/2023/手撕代码系列(三).md',
    },
    {
        id: 'bf5a9acb-ce66-4bc4-a0e5-71bf9faff9fd',
        slug: 'Decorator_Dont_Show_Off_In_Business_Code',
        createdAt: 1708910152114,
        title: '基于装饰器——我劝你不要在业务代码上装逼！！！',
        description:
            '在业务代码中滥用装饰器可能带来的问题。装饰器虽然能增强代码的可读性和可维护性，但过度使用或在不恰当的场景下使用，会导致代码复杂度增加，降低可维护性，甚至引入潜在的错误。业务代码应注重简洁、高效和易于理解，过度追求技术炫技反而违背了这一原则。因此，开发者应谨慎使用装饰器，确保其在提升代码质量的同时，不增加不必要的复杂性和风险。',
        tags: [JAVASCRIPT, TYPESCRIPT, DESIGN_PATTERNS, CODE_QUALITY, STATE_MANAGEMENT],
        content: '/blogs/2023/基于装饰器——我劝你不要在业务代码上装逼！！！.md',
    },
    {
        id: '080aceb4-77e0-49f5-a075-63cc4eb062f1',
        slug: 'Lazy_Change_Original_Object_JavaScript_Proxy_Pattern',
        createdAt: 1708910152114,
        title: '懒得改变原始对象？JavaScript代理模式教你怎样一步步偷懒！',
        description:
            'JavaScript代理模式通过创建一个代理对象来控制对原始对象的访问，从而在不改变原始对象的情况下实现功能增强。这种模式允许开发者在不直接修改原始对象的前提下，添加额外的逻辑或行为，如数据验证、缓存、日志记录等。代理模式的核心思想是解耦，使得代码更加灵活和可维护，同时避免了直接操作原始对象带来的风险。通过代理，开发者可以在不改变现有代码的基础上，逐步引入新功能，实现“偷懒”的效果，提升开发效率和代码质量。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS],
        content: '/blogs/2023/懒得改变原始对象？JavaScript代理模式教你怎样一步步偷懒！.md',
    },
    {
        id: '1b1dfd9f-7002-4c5b-8bc8-6209d9b00bf7',
        slug: 'State_Pattern_Theory_Meets_Practice',
        createdAt: 1708910152101,
        title: '基于状态模式：没有实践的理论都是扯淡！！！',
        description:
            '“基于状态模式：没有实践的理论都是扯淡！！！”强调了理论与实践的紧密结合。状态模式作为一种设计模式，其核心在于通过状态的变化来管理对象的行为。然而，仅仅理解状态模式的理论概念是不够的，必须通过实际项目中的应用来验证和深化理解。实践是检验理论的唯一标准，只有在实际开发中不断尝试、调试和优化，才能真正掌握状态模式的精髓。没有实践支撑的理论往往流于表面，无法解决实际问题，因此，标题呼吁开发者不仅要学习理论，更要注重实践，将理论转化为实际可行的解决方案。',
        tags: [DESIGN_PATTERNS, STATE_MANAGEMENT, JAVASCRIPT, REACT, VUE],
        content: '/blogs/2023/基于状态模式：没有实践的理论都是扯淡！！！.md',
    },
    {
        id: '7ce475be-d505-472c-bc7f-c36bc76765cf',
        slug: 'Frontend_Interview_Questions_JavaScript_Part_1',
        createdAt: 1708910152092,
        title: '前端面试题JavaScript篇(一)',
        description:
            '该标题聚焦于前端开发中的JavaScript面试题，旨在帮助开发者准备面试。JavaScript作为前端开发的核心技术，其面试题通常涵盖基础语法、高级特性、异步编程、DOM操作、性能优化等多个方面。通过解析这些题目，文章不仅帮助读者巩固JavaScript知识，还能提升其在实际项目中的应用能力。面试题的解析过程往往涉及对语言特性的深入理解，以及对常见问题的解决方案的探讨，从而帮助开发者更好地应对面试挑战，提升职业竞争力。',
        tags: [JAVASCRIPT, ALGORITHMS, DATA_STRUCTURES, TESTING, CODE_QUALITY],
        content: '/blogs/2023/前端面试题JavaScript篇(一).md',
    },
    {
        id: '245ca266-b6e6-4814-a566-c23e59f73fee',
        slug: 'Frontend_Interview_Questions_JavaScript_Part_2',
        createdAt: 1708910152092,
        title: '前端面试题JavaScript篇(二)',
        description:
            '该标题聚焦于前端面试中JavaScript相关的问题，旨在帮助读者准备面试。其本质是通过解析和讨论JavaScript的核心概念、常见问题及解决方案，提升面试者的技术深度和应试能力。内容可能涵盖JavaScript的基础语法、高级特性、常见陷阱及最佳实践，帮助读者理解语言的内在逻辑和实际应用。通过这种方式，读者不仅能应对面试中的技术挑战，还能在实际开发中更加熟练地运用JavaScript。',
        tags: [JAVASCRIPT, ALGORITHMS, DATA_STRUCTURES, TESTING, CODE_QUALITY],
        content: '/blogs/2023/前端面试题JavaScript篇(二).md',
    },
    {
        id: 'b82e8969-81ce-4eee-a3c8-c7055e0aea27',
        slug: 'Frontend_Interview_HTML',
        createdAt: 1708910152091,
        title: '前端面试实录HTML篇',
        description:
            '前端面试中HTML部分的实际考察内容，本质上是探讨面试官如何通过HTML相关问题评估候选人的前端技能和知识深度。HTML作为网页结构的基础，其掌握程度直接影响页面的基本功能和用户体验。面试实录通过具体问题和候选人的回答，展示了HTML在实际应用中的重要性，如语义化标签的使用、表单元素的正确应用、以及与CSS和JavaScript的交互等。这些问题不仅考察了候选人的技术熟练度，还反映了其对前端开发最佳实践的理解和应用能力。',
        tags: [HTML],
        content: '/blogs/2023/前端面试实录HTML篇.md',
    },
    {
        id: '908fcace-1e79-4f49-8308-b8ad27910b70',
        slug: 'Frontend_Interview_HTTP_Log',
        createdAt: 1708910152091,
        title: '前端面试实录HTTP篇',
        description:
            '前端面试中对HTTP协议的深入考察，强调了面试者在实际面试过程中对HTTP知识的掌握和应用能力。HTTP作为前端开发的基础，涉及请求、响应、状态码、缓存机制等核心概念，面试官通过具体案例和问题，评估面试者对HTTP协议的理解深度和实际操作经验。这不仅要求面试者熟悉HTTP的基本原理，还需具备解决实际问题的能力，如处理跨域、优化性能、确保安全性等。因此，前端面试中对基础知识的重视，以及对实际应用能力的考察。',
        tags: [HTTP],
        content: '/blogs/2023/前端面试实录HTTP篇.md',
    },
    {
        id: 'b4216bc8-be33-4b37-af93-d18e557253e1',
        slug: 'Frontend_Interview_CSS_Experience',
        createdAt: 1708910152090,
        title: '前端面试实录CSS篇',
        description:
            '前端面试中CSS部分的实际考察内容，强调了面试过程中对CSS知识的深入理解和应用能力的重要性。通过分享面试实录，文章旨在帮助读者了解面试官对CSS的考察重点，如布局、响应式设计、动画效果等，以及如何在这些方面展现自己的技能。总结来说，标题反映了前端面试中CSS技能的核心地位，以及通过实际案例提升面试准备的有效性。',
        tags: [CSS, HTML, RESPONSIVE_DESIGN, UI_UX, PERFORMANCE],
        content: '/blogs/2023/前端面试实录CSS篇.md',
    },
    {
        id: 'd611d450-3594-4a39-a503-fdefa3f63f6c',
        slug: 'Master_JavaScript_Command_Pattern',
        createdAt: 1708910152089,
        title: '全能指挥官：玩转JavaScript命令模式，让代码听你的话！',
        description:
            '“全能指挥官：玩转JavaScript命令模式，让代码听你的话！”揭示了命令模式在JavaScript中的核心作用。命令模式通过将请求封装为对象，使代码更具灵活性和可扩展性，开发者可以像指挥官一样精确控制代码行为。它将操作和执行分离，使得代码更易于维护和测试，同时支持撤销、重做等复杂操作。通过命令模式，开发者能够更高效地管理代码逻辑，提升代码的可读性和可维护性，实现对代码行为的全面掌控。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS],
        content: '/blogs/2023/全能指挥官：玩转JavaScript命令模式，让代码听你的话！.md',
    },
    {
        id: '34cd82a6-2c09-458d-95a5-c24feda0bcb0',
        slug: 'Incredible_Problem_Solver_You_Are_Strong',
        createdAt: 1708910152088,
        title: '不愧是疑问解决神器！你强任你强👍👍👍',
        description:
            '一种工具或方法在解决前端开发中的疑问时表现出的强大能力。"不愧是疑问解决神器"表明该工具在实际应用中被证明非常有效，能够迅速解决开发者的困惑。"你强任你强"则是一种自信的表达，暗示无论问题多么复杂，该工具都能应对自如。整体而言，标题传达了该工具在提升前端开发效率和解决疑难问题方面的卓越表现，是开发者值得信赖的利器。',
        tags: [JAVASCRIPT, REACT, VUE, STATE_MANAGEMENT, BUILD_TOOLS],
        content: '/blogs/2023/不愧是疑问解决神器！你强任你强👍👍👍.md',
    },
    {
        id: 'dcd7cb3e-3d89-4a5a-bb05-34f4743a0599',
        slug: 'Incredible_Problem_Solver_2_You_Are_Strong',
        createdAt: 1708910152067,
        title: '不愧是疑问解决神器(二)！你强任你强👍👍👍',
        description:
            '“不愧是疑问解决神器(二)！你强任你强👍👍👍”强调了某工具或方法在解决前端开发问题上的高效性和强大能力。其本质在于突显该工具或方法的实用性和广泛适用性，能够在面对复杂或棘手的前端问题时，提供快速且有效的解决方案。通过“你强任你强”的表述，传达了无论问题多么复杂，该工具都能应对自如，体现了其强大的功能和灵活性。整体上，标题旨在赞扬该工具在提升开发效率和解决疑难问题方面的卓越表现。',
        tags: [JAVASCRIPT, REACT, STATE_MANAGEMENT, PERFORMANCE, CODE_QUALITY],
        content: '/blogs/2023/不愧是疑问解决神器(二)！你强任你强👍👍👍.md',
    },
    {
        id: '87873407-7ff3-4ee3-853b-967a61fbafcf',
        slug: 'Deep_Dive_JavaScript_Block_Function_Scopes',
        createdAt: 1708910152066,
        title: '【深度剖析】JavaScript中块级作用域与函数作用域',
        description:
            'JavaScript中的块级作用域和函数作用域是理解变量生命周期和可见性的关键。块级作用域由`let`和`const`关键字定义，变量仅在代码块内有效，避免全局污染。函数作用域由`var`定义，变量在整个函数内有效，可能导致意外的变量覆盖。块级作用域更符合现代编程习惯，减少错误，提高代码可维护性。函数作用域则依赖于函数封装，适用于传统编程模式。理解这两种作用域的本质差异，有助于编写更安全、更清晰的代码。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS, STATE_MANAGEMENT],
        content: '/blogs/2023/【深度剖析】JavaScript中块级作用域与函数作用域.md',
    },
    {
        id: 'c1063fe8-30f6-4b6a-9a67-fbf52ece95ae',
        slug: 'A_Novice_Frontend_Devs_3_Year_Summary_2023',
        createdAt: 1708910152066,
        title: '一个菜鸡前端的3年总结-「2023」',
        description:
            '一个前端开发者在职业生涯初期的自我反思与成长。通过“菜鸡”一词，作者自嘲地表达了对自身技术水平的不满，同时也透露出一种谦虚和自我激励的态度。“3年总结”则强调了时间的积累和经验的沉淀，表明作者在这段时间内经历了从新手到有一定经验的转变。而“2023”作为时间节点，不仅标志着总结的当下，也暗示了未来的展望和持续进步的决心。整体来看，标题体现了前端开发者对技术成长的渴望和对自我提升的追求。',
        tags: [JAVASCRIPT, REACT, VUE, HTML, CSS],
        content: '/blogs/2023/一个菜鸡前端的3年总结-「2023」.md',
    },
    {
        id: 'a0fdd227-e11e-4ae8-8751-dad46e738463',
        slug: 'this_mystery_unveiled_part_2',
        createdAt: 1708910152065,
        title: 'this 之谜揭底：从浅入深理解 JavaScript 中的 this 关键字（二）',
        description:
            '该JavaScript中`this`关键字的深层含义，通过逐步深入的方式揭示其背后的机制。`this`在JavaScript中并非固定指向某个对象，而是取决于函数的调用方式。在不同上下文中，如普通函数、箭头函数、对象方法或构造函数中，`this`的指向会有所不同。理解`this`的关键在于掌握其动态绑定特性，即在函数执行时才确定其指向的对象。深入剖析`this`的本质有助于开发者避免常见的陷阱，写出更健壮的代码。',
        tags: [JAVASCRIPT],
        content: '/blogs/2023/this 之谜揭底：从浅入深理解 JavaScript 中的 this 关键字（二）.md',
    },
    {
        id: '0a5accf1-c0de-4097-8957-c140a5abea5e',
        slug: 'JavaScript_Types_Values_Native_Functions_Revealed',
        createdAt: 1708910152064,
        title: 'JavaScript类型、值和原生函数大揭秘, 前端开发者必看！',
        description:
            'JavaScript中类型、值和原生函数的核心概念，强调了它们在前端开发中的重要性。类型决定了数据的性质和操作方式，值是类型的具体实例，而原生函数则是JavaScript提供的内置工具，用于处理和操作这些值。理解这些基础概念有助于开发者编写更高效、更可靠的代码，避免常见的类型错误和逻辑陷阱。通过深入剖析这些元素，开发者能够更好地掌握JavaScript的底层机制，提升编程技能和代码质量。',
        tags: [JAVASCRIPT, TYPESCRIPT, ALGORITHMS, DATA_STRUCTURES, BROWSER_APIS],
        content: '/blogs/2023/JavaScript类型、值和原生函数大揭秘, 前端开发者必看！.md',
    },
    {
        id: '7dff8619-168c-45fa-bf1c-d4387928b33d',
        slug: 'this_mystery_unveiled_understanding_javascript_this_keyword_part_1',
        createdAt: 1708910152064,
        title: 'this 之谜揭底：从浅入深理解 JavaScript 中的 this 关键字（一）',
        description:
            '标题“this 之谜揭底：从浅入深理解 JavaScript 中的 this 关键字（一）”揭示了JavaScript中this关键字的复杂性和重要性。this关键字在JavaScript中并非固定指向某个对象，而是根据函数调用方式动态绑定。理解this的关键在于识别函数的调用上下文，包括普通函数调用、方法调用、构造函数调用和箭头函数调用等不同场景。每种调用方式都会影响this的指向，导致其行为多变且难以捉摸。深入理解this的绑定规则，有助于开发者避免常见的陷阱，编写更清晰、可维护的代码。',
        tags: [JAVASCRIPT],
        content: '/blogs/2023/this 之谜揭底：从浅入深理解 JavaScript 中的 this 关键字（一）.md',
    },
    {
        id: '2edbdbbf-bf4d-4ea2-a082-fafc89295f16',
        slug: 'Vue3_Transition_Troubleshoot',
        createdAt: 1708910152064,
        title: 'Vue3 Transition踩坑记',
        description:
            'Vue3的Transition组件在处理动画效果时，开发者可能会遇到一些常见问题，如动画不触发、样式冲突、性能瓶颈等。这些问题往往源于对Vue3的响应式系统和Transition组件工作机制的理解不足。本质上，Vue3的Transition依赖于CSS过渡和动画，以及JavaScript钩子函数来控制元素的显示和隐藏。开发者需要正确配置transition和animation属性，确保样式优先级正确，并合理使用v-if和v-show指令来触发过渡效果。此外，性能优化也是关键，避免在频繁更新的组件中使用复杂的过渡效果，以免影响用户体验。',
        tags: [VUE, ANIMATION, CSS],
        content: '/blogs/2023/Vue3 Transition踩坑记.md',
    },
    {
        id: 'c5055c3a-762f-4643-8994-4a7823521d98',
        slug: 'JavaScript_Design_Patterns_Strategy_Quick_Tips',
        createdAt: 1708910152063,
        title: 'JavaScript程序设计模式小技巧——策略模式，快看快用！！！',
        description:
            '策略模式是一种设计模式，它允许在运行时选择算法或行为，通过将这些算法或行为封装成独立的策略类，使得它们可以相互替换。在前端开发中，策略模式常用于处理复杂的条件逻辑，避免代码的重复和冗长。通过将不同的策略封装在独立的函数或对象中，可以提高代码的可维护性和可扩展性，同时减少代码的耦合度。这种模式特别适用于需要根据不同条件执行不同操作的场景，如表单验证、数据处理等。使用策略模式，开发者可以轻松地添加、修改或删除策略，而无需修改核心代码，从而实现代码的灵活性和可复用性。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS],
        content: '/blogs/2023/JavaScript程序设计模式小技巧——策略模式，快看快用！！！.md',
    },
    {
        id: '4a36c59b-0f96-43d2-acfb-b86b46b2e840',
        slug: 'JavaScript_Elegant_Coding_Singleton_Pattern',
        createdAt: 1708910152047,
        title: 'JavaScript的优雅编程技巧：Singleton Pattern',
        description:
            'Singleton Pattern是一种设计模式，确保一个类只有一个实例，并提供一个全局访问点。在前端开发中，它常用于管理全局状态或资源，如配置、缓存或数据库连接。通过限制实例数量，Singleton Pattern减少了内存占用和资源竞争，提高了代码的可维护性和性能。实现时，通常使用闭包或模块模式来隐藏实例的创建逻辑，确保只有唯一实例存在。这种模式在需要严格控制资源访问和状态管理的场景中尤为重要，帮助开发者编写更优雅、高效的JavaScript代码。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS],
        content: '/blogs/2023/JavaScript的优雅编程技巧：Singleton Pattern.md',
    },
    {
        id: '0047097d-c02a-441b-9b39-9753399566d2',
        slug: 'JavaScript_Deep_Dive_Variable_Function_Hoisting',
        createdAt: 1708910152041,
        title: 'JavaScript深度剖析之变量、函数提升：从表面到本质',
        description:
            'JavaScript中的变量和函数提升是理解语言运行机制的关键。变量提升是指在代码执行前，变量声明会被提升到其作用域的顶部，但初始化保留在原位。函数提升则是指函数声明在代码执行前被提升到其作用域的顶部，使得函数可以在声明之前被调用。这两种提升机制的本质在于JavaScript的编译器在执行代码前会先扫描并处理所有的声明，确保变量和函数在作用域内是可访问的。理解这一点有助于避免常见的变量未定义错误，并能更清晰地组织代码结构。',
        tags: [JAVASCRIPT, ALGORITHMS, DATA_STRUCTURES, BROWSER_APIS, CODE_QUALITY],
        content: '/blogs/2023/JavaScript深度剖析之变量、函数提升：从表面到本质.md',
    },
    {
        id: 'eafe8ce8-480f-445d-b7ec-0c746fb2492c',
        slug: 'JavaScript_Practice_Theory_Scope_Closure_This_Prototype',
        createdAt: 1708910152040,
        title: 'JavaScript实践+理论(总结篇)：作用域、闭包、this、对象原型',
        description:
            'JavaScript实践与理论的总结篇深入探讨了作用域、闭包、this和对象原型等核心概念。作用域决定了变量的可见性和生命周期，分为全局和局部作用域。闭包是函数与其词法环境的组合，允许函数访问其外部作用域的变量，实现私有变量和函数。this关键字在不同上下文中有不同指向，如全局、函数、对象方法和构造函数中。对象原型是JavaScript实现继承的基础，通过原型链实现属性和方法的共享与继承。这些概念共同构成了JavaScript的灵活性和强大功能，理解它们是掌握JavaScript编程的关键。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS, ALGORITHMS, DATA_STRUCTURES, BROWSER_APIS],
        content: '/blogs/2023/JavaScript实践+理论(总结篇)：作用域、闭包、this、对象原型.md',
    },
    {
        id: '549ab627-4164-40b2-a4fa-9a8e615b2ca1',
        slug: 'JavaScript_Scope_Deep_Dive_Dynamic_Scoping',
        createdAt: 1708910152002,
        title: 'JavaScript作用域深度剖析：动态作用域',
        description:
            'JavaScript作用域深度剖析：动态作用域的核心在于理解作用域的动态特性，即变量的作用域不仅由代码结构决定，还受函数调用时的上下文影响。与静态作用域（词法作用域）不同，动态作用域在运行时确定，使得变量的查找路径依赖于调用栈而非代码的嵌套结构。这种特性使得代码在不同上下文中执行时，变量的引用可能发生变化，增加了代码的灵活性但也带来了潜在的复杂性和调试难度。理解动态作用域的关键在于把握变量在运行时的实际引用，而非仅仅依赖于代码的静态分析。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS, CODE_QUALITY, ALGORITHMS, DATA_STRUCTURES],
        content: '/blogs/2023/JavaScript作用域深度剖析：动态作用域.md',
    },
    {
        id: 'd0f53f5e-ddd9-4702-89bd-e4fa8156ab0a',
        slug: 'JavaScript_eval_with_scope_chain_deep_dive',
        createdAt: 1708910151979,
        title: 'JavaScript中eval和with语句如何影响作用域链：探索深度知识',
        description:
            'JavaScript中eval和with语句对作用域链的影响。eval动态执行代码，可能引入新的变量或函数，导致作用域链发生变化，增加调试难度。with语句临时扩展对象属性到作用域链顶端，使属性查找更快，但可能掩盖未定义变量错误，降低代码可读性和性能。两者均影响作用域链，eval动态性更强，with更侧重于对象属性访问优化，但都需谨慎使用，以避免潜在问题。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS, CODE_QUALITY, BROWSER_APIS, STATE_MANAGEMENT],
        content: '/blogs/2023/JavaScript中eval和with语句如何影响作用域链：探索深度知识.md',
    },
    {
        id: '673b573d-8975-4f0d-8133-e34114cfc0fd',
        slug: 'JavaScript_Scope_Deep_Dive_Local_to_Global',
        createdAt: 1708910151979,
        title: 'JavaScript作用域深度剖析：从局部到全局一网打尽',
        description:
            'JavaScript作用域深度剖析的核心在于理解变量的可见性和生命周期，从局部作用域到全局作用域的过渡揭示了代码执行时的变量查找机制。局部作用域受限于函数或块级结构，变量仅在定义范围内有效，避免全局污染。全局作用域则涵盖整个脚本，变量无处不在，需谨慎使用以防止命名冲突。闭包通过保留外部作用域的引用，实现局部变量的持久化。理解作用域链的构建和变量提升现象，有助于编写更清晰、可维护的代码。',
        tags: [JAVASCRIPT, DESIGN_PATTERNS, ALGORITHMS, DATA_STRUCTURES, BROWSER_APIS],
        content: '/blogs/2023/JavaScript作用域深度剖析：从局部到全局一网打尽.md',
    },
    {
        id: '73698a5b-68fd-4acd-a4ff-eb75e7db49bd',
        slug: 'JavaScript_Wrapper_Types_Explained',
        createdAt: 1708910151978,
        title: 'JavaScript中的包装类型详解',
        description:
            'JavaScript中的包装类型详解本质上是探讨基本数据类型（如字符串、数字、布尔值）在特定情况下如何被临时转换为对象，以便调用对象方法。这种转换由JavaScript引擎自动完成，称为包装对象。通过包装类型，开发者可以在基本数据类型上调用对象方法，而无需显式创建对象实例。这种机制简化了代码，增强了基本数据类型的功能，但需注意包装对象是临时的，不会改变原始数据类型。理解包装类型有助于深入掌握JavaScript的类型系统和自动类型转换机制。',
        tags: [JAVASCRIPT, DATA_STRUCTURES, BROWSER_APIS],
        content: '/blogs/2024/JavaScript中的包装类型详解.md',
    },
];
